<!DOCTYPE html>
<html lang="zh-Hans">

<!-- Head tag -->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Description-->
    
        <meta name="description" content="Note">
    

    <!--Author-->
    
        <meta name="author" content="兰陵忧患生">
    

    <!-- Title -->
    
    <title>DOM Scripting | Lan</title>

    <!-- Bootstrap Core CSS -->
    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet"
      href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/styles/default.min.css">
    <script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/highlight.min.js"></script>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/style.css">

    <!-- Custom Fonts -->
    <link href="//cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href='//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

    <!-- Content -->
    <section class="article-container">
<!-- Back Home -->
<a class="nav-back" href="/">
    <i class="fa fa-puzzle-piece"></i>
</a>

<!-- Page Header -->
<header class="intro-header">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="post-heading">
                    <h1>DOM Scripting</h1>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Post Content -->
<article>
    <div class="container">
        <div class="row">
            <!-- TOC -->
            <div class="toc-article col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
    <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#JavaScript-简史"><span class="toc-text">JavaScript 简史</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#JavaScript-的起源"><span class="toc-text">JavaScript 的起源</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#DOM"><span class="toc-text">DOM</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#浏览器战争"><span class="toc-text">浏览器战争</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#DHTML"><span class="toc-text">DHTML</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#浏览器之间的冲突"><span class="toc-text">浏览器之间的冲突</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#指定标准"><span class="toc-text">指定标准</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#浏览器以外的考虑"><span class="toc-text">浏览器以外的考虑</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#浏览器战争的结局"><span class="toc-text">浏览器战争的结局</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#崭新的起点"><span class="toc-text">崭新的起点</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#JavaScript-语法"><span class="toc-text">JavaScript 语法</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#准备工作"><span class="toc-text">准备工作</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#语法"><span class="toc-text">语法</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#语句"><span class="toc-text">语句</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#注释"><span class="toc-text">注释</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#变量"><span class="toc-text">变量</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#数据类型"><span class="toc-text">数据类型</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#字符串"><span class="toc-text">字符串</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#数值"><span class="toc-text">数值</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#布尔值"><span class="toc-text">布尔值</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#数组"><span class="toc-text">数组</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#关联数组"><span class="toc-text">关联数组</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#对象"><span class="toc-text">对象</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#操作"><span class="toc-text">操作</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#算术运算符"><span class="toc-text">算术运算符</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#条件语句"><span class="toc-text">条件语句</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#比较操作符"><span class="toc-text">比较操作符</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#逻辑操作符"><span class="toc-text">逻辑操作符</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#循环语句"><span class="toc-text">循环语句</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#函数"><span class="toc-text">函数</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#变量的作用域"><span class="toc-text">变量的作用域</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#对象-1"><span class="toc-text">对象</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#内建对象"><span class="toc-text">内建对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#宿主对象"><span class="toc-text">宿主对象</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#DOM-1"><span class="toc-text">DOM</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#文档：DOM-中的“D”"><span class="toc-text">文档：DOM 中的“D”</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#对象：DOM中的“O”"><span class="toc-text">对象：DOM中的“O”</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#模型：DOM-中的“M”"><span class="toc-text">模型：DOM 中的“M”</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#节点"><span class="toc-text">节点</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#元素节点"><span class="toc-text">元素节点</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#文本节点"><span class="toc-text">文本节点</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#属性节点"><span class="toc-text">属性节点</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#CSS"><span class="toc-text">CSS</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#class-属性"><span class="toc-text">class 属性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#id-属性"><span class="toc-text">id 属性</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#获取元素"><span class="toc-text">获取元素</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#getElementById"><span class="toc-text">getElementById</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#getElementsByTagName"><span class="toc-text">getElementsByTagName</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#getElementsByClassName"><span class="toc-text">getElementsByClassName</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#获取和设置属性"><span class="toc-text">获取和设置属性</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#getAttribute"><span class="toc-text">getAttribute</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#setAttribute"><span class="toc-text">setAttribute</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#案例研究：JavaScript-图片库"><span class="toc-text">案例研究：JavaScript 图片库</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#事件处理函数"><span class="toc-text">事件处理函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#函数扩展"><span class="toc-text">函数扩展</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#childNodes-属性"><span class="toc-text">childNodes 属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#nodeType-属性"><span class="toc-text">nodeType 属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#nodeValue-属性"><span class="toc-text">nodeValue 属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#firstChild-和-lastChild-属性"><span class="toc-text">firstChild 和 lastChild 属性</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#最佳实践"><span class="toc-text">最佳实践</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#过去的错误"><span class="toc-text">过去的错误</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#不要怪罪-JavaScript"><span class="toc-text">不要怪罪 JavaScript</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Flash-的遭遇"><span class="toc-text">Flash 的遭遇</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#质疑一切"><span class="toc-text">质疑一切</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#平稳退化"><span class="toc-text">平稳退化</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#“javascript-”-伪协议"><span class="toc-text">“javascript:” 伪协议</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#内嵌的事件处理函数"><span class="toc-text">内嵌的事件处理函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#谁关心这个"><span class="toc-text">谁关心这个</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#向-CSS-学习"><span class="toc-text">向 CSS 学习</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#结构与样式的分离"><span class="toc-text">结构与样式的分离</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#渐进增强"><span class="toc-text">渐进增强</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#分离-JavaScript"><span class="toc-text">分离 JavaScript</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#向后兼容"><span class="toc-text">向后兼容</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#对象检测"><span class="toc-text">对象检测</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#浏览器嗅探技术"><span class="toc-text">浏览器嗅探技术</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#性能考虑"><span class="toc-text">性能考虑</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#尽量少访问-DOM-和尽量减少标记"><span class="toc-text">尽量少访问 DOM 和尽量减少标记</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#合并和放置脚本"><span class="toc-text">合并和放置脚本</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#压缩脚本"><span class="toc-text">压缩脚本</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#案例研究：图片库改进版"><span class="toc-text">案例研究：图片库改进版</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#共享-onload-事件"><span class="toc-text">共享 onload 事件</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#不要做太多的假设"><span class="toc-text">不要做太多的假设</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#优化"><span class="toc-text">优化</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#键盘访问"><span class="toc-text">键盘访问</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#把-JavaScript-与-CSS-结合起来"><span class="toc-text">把 JavaScript 与 CSS 结合起来</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#DOM-Core-和-HTML-DOM"><span class="toc-text">DOM Core 和 HTML-DOM</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#小结"><span class="toc-text">小结</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#动态创建标记"><span class="toc-text">动态创建标记</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#一些传统方法"><span class="toc-text">一些传统方法</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#document-write"><span class="toc-text">document.write</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#innerHTML-属性"><span class="toc-text">innerHTML 属性</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#DOM-方法"><span class="toc-text">DOM 方法</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#createElement-方法"><span class="toc-text">createElement 方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#appendChild-方法"><span class="toc-text">appendChild 方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#createTextNode-方法"><span class="toc-text">createTextNode 方法</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#重回图片库"><span class="toc-text">重回图片库</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#在已有元素前插入一个新元素"><span class="toc-text">在已有元素前插入一个新元素</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#在现有方法后插入一个新元素"><span class="toc-text">在现有方法后插入一个新元素</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Ajax"><span class="toc-text">Ajax</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#XMLHttpRequest-对象"><span class="toc-text">XMLHttpRequest 对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#渐进增强与-Ajax"><span class="toc-text">渐进增强与 Ajax</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Hijax-渐进增强地使用-Ajax"><span class="toc-text">Hijax - 渐进增强地使用 Ajax</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#充实文档的内容"><span class="toc-text">充实文档的内容</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#不应该做什么"><span class="toc-text">不应该做什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#把-“不可见”-变成-“可见”"><span class="toc-text">把 “不可见” 变成 “可见”</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#选用-HTML，XHTML-还是-HTML5"><span class="toc-text">选用 HTML，XHTML 还是 HTML5</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#显示-“缩略语列表”"><span class="toc-text">显示 “缩略语列表”</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#创建标记"><span class="toc-text">创建标记</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#一个浏览器-“地雷”"><span class="toc-text">一个浏览器 “地雷”</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#显示-“文献来源链接表”"><span class="toc-text">显示 “文献来源链接表”</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#显示-“快捷键清单”"><span class="toc-text">显示 “快捷键清单”</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#检索和添加信息"><span class="toc-text">检索和添加信息</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#CSS-DOM"><span class="toc-text">CSS-DOM</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#三位一体的网页"><span class="toc-text">三位一体的网页</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#分离"><span class="toc-text">分离</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#style-属性"><span class="toc-text">style 属性</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#获取样式"><span class="toc-text">获取样式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#设置样式"><span class="toc-text">设置样式</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#何时该用-DOM-脚本设置样式"><span class="toc-text">何时该用 DOM 脚本设置样式</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#根据元素在节点树里的位置来设置样式"><span class="toc-text">根据元素在节点树里的位置来设置样式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#根据某种条件反复设置某种样式"><span class="toc-text">根据某种条件反复设置某种样式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#响应事件"><span class="toc-text">响应事件</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#className-属性"><span class="toc-text">className 属性</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#对函数进行抽象"><span class="toc-text">对函数进行抽象</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#用-JavaScript-实现动画效果"><span class="toc-text">用 JavaScript 实现动画效果</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#动画基础知识"><span class="toc-text">动画基础知识</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#位置"><span class="toc-text">位置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#时间"><span class="toc-text">时间</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#时间递增量"><span class="toc-text">时间递增量</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#抽象"><span class="toc-text">抽象</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#实用的动画"><span class="toc-text">实用的动画</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#提出问题"><span class="toc-text">提出问题</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#解决问题"><span class="toc-text">解决问题</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#CSS-1"><span class="toc-text">CSS</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#变量作用域问题"><span class="toc-text">变量作用域问题</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#改进动画效果"><span class="toc-text">改进动画效果</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#添加安全检查"><span class="toc-text">添加安全检查</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#生成-HTML-标记"><span class="toc-text">生成 HTML 标记</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#HTML5"><span class="toc-text">HTML5</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#忠告"><span class="toc-text">忠告</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#示例"><span class="toc-text">示例</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Canvas"><span class="toc-text">Canvas</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#音频和视频"><span class="toc-text">音频和视频</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#混乱的时候"><span class="toc-text">混乱的时候</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#自定义控件"><span class="toc-text">自定义控件</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#表单"><span class="toc-text">表单</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#综合示例"><span class="toc-text">综合示例</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#增强表单"><span class="toc-text">增强表单</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#压缩代码"><span class="toc-text">压缩代码</span></a></li></ol></li></ol></li></ol>
</div>

            <!-- Post Main Content -->
            <div class="post-content col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <h1 id="JavaScript-简史"><a href="#JavaScript-简史" class="headerlink" title="JavaScript 简史"></a>JavaScript 简史</h1><h2 id="JavaScript-的起源"><a href="#JavaScript-的起源" class="headerlink" title="JavaScript 的起源"></a>JavaScript 的起源</h2><ul>
<li><code>ECMA</code> 欧洲计算机制造商协会</li>
<li><code>BOM</code> 浏览器对象模型</li>
</ul>
<h2 id="DOM"><a href="#DOM" class="headerlink" title="DOM"></a>DOM</h2><ul>
<li>DOM 是一套对文档的内容进行抽象和概念化的方法。</li>
</ul>
<h2 id="浏览器战争"><a href="#浏览器战争" class="headerlink" title="浏览器战争"></a>浏览器战争</h2><h3 id="DHTML"><a href="#DHTML" class="headerlink" title="DHTML"></a>DHTML</h3><ul>
<li><p><code>DHTML</code> Dynamic HTML(动态 HTML )的简介。</p>
<ul>
<li>描述 HTML，CSS，和 JavaScript 技术组合的术语。</li>
</ul>
</li>
</ul>
<h3 id="浏览器之间的冲突"><a href="#浏览器之间的冲突" class="headerlink" title="浏览器之间的冲突"></a>浏览器之间的冲突</h3><pre><code class="JavaScript">// Netscape Navigator 4 浏览器
var xpos = document.layers[&#39;myelement&#39;].left;

// IE 4
var xops = document.all[&#39;myelement&#39;].leftpos;
</code></pre>
<h2 id="指定标准"><a href="#指定标准" class="headerlink" title="指定标准"></a>指定标准</h2><pre><code class="JavaScript">var xpos = document.getElementById(&#39;myelement&#39;).style.left;
</code></pre>
<h3 id="浏览器以外的考虑"><a href="#浏览器以外的考虑" class="headerlink" title="浏览器以外的考虑"></a>浏览器以外的考虑</h3><ul>
<li><p>DOM 是一种 API （应用编程接口）</p>
<ul>
<li>API 就是一组已经得到有关各方共同认可的基本约定。</li>
<li>在现实世界中，相当于 API 的例子包括摩尔斯码，国际时区，化学元素，周期表。</li>
</ul>
</li>
<li><p>W3C 对 DOM 的定义是“一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地访问和修改文档的内容，结构和样式。”</p>
</li>
</ul>
<h3 id="浏览器战争的结局"><a href="#浏览器战争的结局" class="headerlink" title="浏览器战争的结局"></a>浏览器战争的结局</h3><ul>
<li>WaSP Web标准计划的小组应运而生。</li>
</ul>
<h3 id="崭新的起点"><a href="#崭新的起点" class="headerlink" title="崭新的起点"></a>崭新的起点</h3><ul>
<li>WebKit 是 Safari 和 Chrome 采用的一个开源 Web 浏览器引擎。</li>
<li>Gecko 是 Firefox 的核心。</li>
<li>Trident 是 IE 的核心。</li>
</ul>
<h1 id="JavaScript-语法"><a href="#JavaScript-语法" class="headerlink" title="JavaScript 语法"></a>JavaScript 语法</h1><h2 id="准备工作"><a href="#准备工作" class="headerlink" title="准备工作"></a>准备工作</h2><ul>
<li><p>JavaScript 编写的代码的位置</p>
<ul>
<li>放在文档 <code>&lt;head&gt;</code> 标签中的 <code>&lt;script&gt;</code> 标签之间</li>
<li>存为一个扩展名为 .js 的独立文件。典型的做法是在文档的 <code>&lt;head&gt;</code> 部分放一个 <code>&lt;script&gt;</code> 标签，并把它的 src 属性指向该文件。</li>
<li>最好的做法是把 <code>&lt;script&gt;</code> 标签放到 HTML 文档的最后，<code>&lt;/body&gt;</code> 标签之前。这样能使浏览器更快地加载页面。</li>
</ul>
</li>
<li><p><code>&lt;script&gt;</code> 脚本默认是 JavaScript，梅比哟啊指定 type</p>
</li>
<li><p>对于 JavaScript 语言，在互联网环境下，Web 浏览器负责完成有关的解释和执行工作。浏览器中的 JavaScript 解释器将直接读入源代码并执行。</p>
</li>
<li>解释型语言代码中的错误只有等到解释器执行到有关代码时才能发现。</li>
</ul>
<h2 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h2><ul>
<li>英语是一种解释型语言。</li>
</ul>
<h3 id="语句"><a href="#语句" class="headerlink" title="语句"></a>语句</h3><ul>
<li>建议在每条语句的末尾都加上一个分号。</li>
<li>让每条语句独占一行的做法能更容易跟踪 JavaScript 脚本的执行顺序。</li>
</ul>
<h3 id="注释"><a href="#注释" class="headerlink" title="注释"></a>注释</h3><pre><code class="JavaScript">//

/*
*/

// HTML 风格的注释，但这种做法适用于单行注释
&lt;!--  // JavaScript 解释器对 `&lt;!--` 和 `//` 的处理一样。

&lt;!-- --&gt; // HTML 注释可以多行

// 建议使用上面两种
</code></pre>
<h3 id="变量"><a href="#变量" class="headerlink" title="变量"></a>变量</h3><ul>
<li>虽然 JavaScript 没有强制要求程序员必须提前声明变量（未声明变量，赋值操作将自动声明该变量），但提前声明变量是一种良好的编程习惯。</li>
</ul>
<pre><code class="JavaScript">var mood = &quot;happy&quot;, age = 33; // 一条语句
</code></pre>
<ul>
<li>变量和其他语法元素的名字都是区分字母大小写的。</li>
<li>不允许变量名中包含空格或标点符号（美元符号 “$” 例外）</li>
<li><p>JavaScript 变量名允许包含字母，数字，美元符号和下划线（但第一个字符不允许是数字）</p>
<ul>
<li>为了让比较长的变量名更容易阅读，可以在变量名中的适当位置插入下划线。</li>
<li>另一种方式是驼峰格式（camel case）</li>
</ul>
</li>
<li><p>驼峰格式是函数名，方法名和对象属性名命名的首选格式。</p>
</li>
</ul>
<h3 id="数据类型"><a href="#数据类型" class="headerlink" title="数据类型"></a>数据类型</h3><ul>
<li>弱类型 可以在任何阶段改变变量的数据类型。</li>
</ul>
<h4 id="字符串"><a href="#字符串" class="headerlink" title="字符串"></a>字符串</h4><ul>
<li>字符串由零个或多个字符构成。字符包括（但不限于）字母，数字，标点符号和空格。</li>
</ul>
<pre><code class="JavaScript">// 转义（escaping）
var mood = &#39;don\&#39;t ash&#39;;
var height = &quot;about 5&#39;10\&quot; tall&quot;;
</code></pre>
<ul>
<li>不管选择用双引号还是单引号，请在整个脚本中保持一致。</li>
</ul>
<h4 id="数值"><a href="#数值" class="headerlink" title="数值"></a>数值</h4><h4 id="布尔值"><a href="#布尔值" class="headerlink" title="布尔值"></a>布尔值</h4><ul>
<li>从某种意义上讲，为计算机设计程序就是与布尔值打交道。作为最基本的事实，所有的电子电路只能识别和使用布尔数据：电路中有电流或是没有电流。</li>
</ul>
<h3 id="数组"><a href="#数组" class="headerlink" title="数组"></a>数组</h3><ul>
<li>字符串，数值和布尔值都是标量（scalar）。</li>
</ul>
<pre><code class="JavaScript">// Array 关键字声明
var beatles = Array(4); // 长度
var beatles = Array(); // 可变长

beatles[0] = &quot;John&quot;;

var beatles = Array(&quot;John&quot;, &quot;Paul&quot;, &quot;George&quot;, &quot;Ringo&quot;);
var beatles = [&quot;John&quot;, &quot;Paul&quot;, &quot;George&quot;, &quot;Ringo&quot;];
var lennon = [&quot;John&quot;, 1940, false]; // 3 种数据类型混在一起存入一个数组
</code></pre>
<ul>
<li>存放数据的首选方式：将数据保存为对象。</li>
</ul>
<h4 id="关联数组"><a href="#关联数组" class="headerlink" title="关联数组"></a>关联数组</h4><ul>
<li>如果在填充数组时只给出了元素的值，这个数组就将是一个传统数组，它的各个元素的下标将自动创建和刷新。</li>
<li>可以通过在填充数组时为每个新元素明确地给出下标来改变这种默认的行为。在为新元素给出下标时，不必局限于使用整数数字。</li>
</ul>
<pre><code class="JavaScript">// 可以使用字符串
var lennon = Array();
lennon[&quot;name&quot;] = &quot;John&quot;;
lennon[&quot;year&quot;] = 1940;
lennon[&quot;living&quot;] = false;
// 关联数组。由于可以使用字符串来代替数字值，因而代码更具有可读性。
// 但是这种方法不是个好习惯，不推荐使用。
</code></pre>
<ul>
<li>所有的变量实际上都是某种类型的对象。（一个布尔值就是一个 Boolean 类型的对象，一个数组就是一个 Array 类型的对象。）</li>
<li>本质上，在创建关联数组时，你创建的是 Array 对象的属性。理想情况下，不应该修改 Array 对象的属性，而应该使用通用的对象。</li>
</ul>
<h3 id="对象"><a href="#对象" class="headerlink" title="对象"></a>对象</h3><ul>
<li>对象的每个值都是对象的一个属性。</li>
</ul>
<pre><code class="JavaScript">// 创建对象使用 Object 关键字
var lennon = Object();
lennon.name = &quot;John&quot;;
lennon.year = 1940;
lennon.living = false;

// 花括号语法
{ propertyName:value, propertyName:value }

var lennon = { name:&quot;John&quot;, year:1940, living:false };
// 属性名与 JavaScript 变量的命名规则有相同之处，属性值可以是任何 JavaScript 值，包括其他对象。
</code></pre>
<ul>
<li>用对象来替代传统数组的做法意味着可以通过元素的名字而不是下标数字来引用它们。这大大提高了脚步的可读性。</li>
</ul>
<h2 id="操作"><a href="#操作" class="headerlink" title="操作"></a>操作</h2><h3 id="算术运算符"><a href="#算术运算符" class="headerlink" title="算术运算符"></a>算术运算符</h3><pre><code class="JavaScript">year = year + 1;
year++;
year--;

// 数值和字符串拼接在一起，数值将被自动转换为字符串：
var year = 2005;
var message = &quot;The year is &quot; + year;
message += year;
</code></pre>
<h2 id="条件语句"><a href="#条件语句" class="headerlink" title="条件语句"></a>条件语句</h2><pre><code class="JavaScript">if (condition)
{
    statements;
} else
{
}

// 如果 if 语句中的花括号部分只包含着一条语句的话，那就可以不使用花括号。
if (1 &gt; 2) alert(&quot;The world has gone mad!&quot;);
</code></pre>
<ul>
<li>花括号可以提高脚本的可读性，所以在 if 语句中总是使用花括号是个好习惯。</li>
</ul>
<h3 id="比较操作符"><a href="#比较操作符" class="headerlink" title="比较操作符"></a>比较操作符</h3><ul>
<li>单个等号（=）是用于完成赋值操作的。如果在条件语句的某个条件里使用了单个等号，那么只要相应的赋值操作取得成功（且这个值不是 false），那个条件的求职结果就将是 true。</li>
</ul>
<pre><code class="JavaScript">ToNumber(false) === ToNumber(&quot;&quot;) // 都是 0 ，Number(false);
</code></pre>
<h3 id="逻辑操作符"><a href="#逻辑操作符" class="headerlink" title="逻辑操作符"></a>逻辑操作符</h3><h2 id="循环语句"><a href="#循环语句" class="headerlink" title="循环语句"></a>循环语句</h2><pre><code class="JavaScript">do 
{
    statements;
} while (condition);

initialize;
while (condition)
{
    statements;
    increments;
}

for (initial condition; test condition; alter condition)
{
    statements;
}
</code></pre>
<h2 id="函数"><a href="#函数" class="headerlink" title="函数"></a>函数</h2><ul>
<li>函数（funtion）就是一组允许在你的代码里随时调用的语句。事实上，每个函数实际上是一个短小的脚本。</li>
<li>作为一个良好的编程习惯，应该对函数作出定义再调用它们。</li>
<li><p>内建函数 alert(argument);</p>
</li>
<li><p>函数的真正价值体现在，我们还可以把它们当作一种数据类型来使用，这意味着可以把一个函数的调用结果赋值给一个变量。</p>
</li>
<li>函数名 驼峰命名法</li>
</ul>
<h3 id="变量的作用域"><a href="#变量的作用域" class="headerlink" title="变量的作用域"></a>变量的作用域</h3><ul>
<li>全局变量的作用域是整个脚本。</li>
<li>局部变量的作用域仅限于某个特定的函数。</li>
<li>var 关键字明确地为函数变量设定作用域。</li>
<li><p>如果没有使用 var ，那个变量就将被视为一个全局变量。</p>
</li>
<li><p>函数在行为方面应该像一个自给自足的脚本，在定义一个函数时，我们一定要把它内部的变量全都明确地声明为局部变量。避免任何形式的二义性隐患。</p>
</li>
</ul>
<h2 id="对象-1"><a href="#对象-1" class="headerlink" title="对象"></a>对象</h2><ul>
<li><p>对象是自包含的数据集合，包含在对象里的数据可以通过两种形式访问——属性（property）和方法（method）</p>
<ul>
<li>属性是隶属于某个特定对象的变量</li>
<li>方法是只有某个特定对象才能调用的函数</li>
</ul>
</li>
<li><p>对象就是由一些属性和方法组合在一起而构成的一个数据实体。</p>
</li>
</ul>
<pre><code class="JavaScript">// 在 JavaScript 里，属性和方法都使用“点”语法来访问
Object.property
Object.method()

// 实例 是对象的具体个体
var jeremy = new Person;
</code></pre>
<ul>
<li>用户定义对象（user-defined object）</li>
<li>内建对象（native object）</li>
</ul>
<h3 id="内建对象"><a href="#内建对象" class="headerlink" title="内建对象"></a>内建对象</h3><pre><code class="JavaScript">// 数组就是其中一种内建对象。
// 创建一个 Array 对象的实例
var beatles = new Array();

Math.routnd(7.561);

var current_date = new Date();
</code></pre>
<h3 id="宿主对象"><a href="#宿主对象" class="headerlink" title="宿主对象"></a>宿主对象</h3><ul>
<li>由浏览器提供的预定义对象被称为宿主对象（host object）</li>
<li>Form, Image, Element</li>
<li>document</li>
</ul>
<h1 id="DOM-1"><a href="#DOM-1" class="headerlink" title="DOM"></a>DOM</h1><h2 id="文档：DOM-中的“D”"><a href="#文档：DOM-中的“D”" class="headerlink" title="文档：DOM 中的“D”"></a>文档：DOM 中的“D”</h2><ul>
<li>document</li>
<li>把编写的网页文档转换为一个文档对象</li>
</ul>
<h2 id="对象：DOM中的“O”"><a href="#对象：DOM中的“O”" class="headerlink" title="对象：DOM中的“O”"></a>对象：DOM中的“O”</h2><ul>
<li><p>JavaScript 语言里的对象可以分为三种类型</p>
<ul>
<li>用户定义对象（user-defined object）</li>
<li>内建对象（native object），内建在 JavaScript 语言里的对象，如 Array,Math,Date等</li>
<li><p>宿主对象（host object）浏览器提供的对象</p>
<ul>
<li>window 对象对应着浏览器窗口本身，这个对象的属性和方法通常称为 BOM （浏览器对象模型），Window Object Model（窗口对象模型）</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="模型：DOM-中的“M”"><a href="#模型：DOM-中的“M”" class="headerlink" title="模型：DOM 中的“M”"></a>模型：DOM 中的“M”</h2><ul>
<li>节点树</li>
</ul>
<h2 id="节点"><a href="#节点" class="headerlink" title="节点"></a>节点</h2><ul>
<li><p>文档是由节点构成的集合</p>
</li>
<li><p>三种 元素节点，文本节点，属性节点</p>
</li>
</ul>
<h3 id="元素节点"><a href="#元素节点" class="headerlink" title="元素节点"></a>元素节点</h3><ul>
<li>DOM 的原子是元素节点。</li>
<li>标签的名字就是元素的名字。</li>
<li>根元素 <code>&lt;html&gt;</code></li>
</ul>
<h3 id="文本节点"><a href="#文本节点" class="headerlink" title="文本节点"></a>文本节点</h3><ul>
<li>在XHTML文档里，文本节点总是被被包含在元素节点的内部。但并非所有的元素节点都包含文本节点。</li>
</ul>
<h3 id="属性节点"><a href="#属性节点" class="headerlink" title="属性节点"></a>属性节点</h3><ul>
<li>用来对元素做出了更具体的描述。</li>
</ul>
<h3 id="CSS"><a href="#CSS" class="headerlink" title="CSS"></a>CSS</h3><pre><code class="CSS">selector
{
    property: value;
}
</code></pre>
<ul>
<li>继承（inheritance），节点树上的各个元素将继承其父元素的样式属性。</li>
</ul>
<h4 id="class-属性"><a href="#class-属性" class="headerlink" title="class 属性"></a>class 属性</h4><ul>
<li>在样式表里，可以为 class 属性值相同的所有元素定义同一种样式。</li>
</ul>
<h4 id="id-属性"><a href="#id-属性" class="headerlink" title="id 属性"></a>id 属性</h4><ul>
<li>id 属性的用途是给网页里的某个元素加上一个独一无二的标识符。</li>
</ul>
<h3 id="获取元素"><a href="#获取元素" class="headerlink" title="获取元素"></a>获取元素</h3><ul>
<li>3 种 DOM 方法获取元素节点。元素 ID，标签名字，类名字</li>
</ul>
<h4 id="getElementById"><a href="#getElementById" class="headerlink" title="getElementById"></a>getElementById</h4><ul>
<li>返回一个与那个有着给定 id 属性值的元素节点对应的对象。</li>
</ul>
<pre><code class="JavaScript">var purchases = document.getElementById(&quot;purchases&quot;);

typeof(purchases); // object
</code></pre>
<h4 id="getElementsByTagName"><a href="#getElementsByTagName" class="headerlink" title="getElementsByTagName"></a>getElementsByTagName</h4><ul>
<li>返回一个对象数组。</li>
</ul>
<pre><code class="JavaScript">element.getElementsByTagName(tag);

document.getElementsByTagName(&quot;li&quot;);

// getElementsByTagName 允许把一个通配符作为它的参数
document.getElementsByTagName(&quot;*&quot;);

var shopping = document.getElementById(&quot;purchases&quot;);
var items = shopping.getElementsByTagName(&quot;*&quot;);
</code></pre>
<h4 id="getElementsByClassName"><a href="#getElementsByClassName" class="headerlink" title="getElementsByClassName"></a>getElementsByClassName</h4><ul>
<li>返回一个具有相同类名的元素的数组</li>
</ul>
<pre><code class="JavaScript">document.getElementsByClassName(&quot;sale&quot;);
document.getElementsByClassName(&quot;important sale&quot;); // 与类名的实际顺序无关

var shopping = document.getElementById(&quot;purchases&quot;);
var sales = shopping.getElementsByClassName(&quot;sale&quot;);
</code></pre>
<ul>
<li>实现 getElementsByClassname</li>
</ul>
<pre><code class="JavaScript">// 不适用于多个类名
function getElementsByClassName(node, classname) 
{
    if(node.getElementByClassName) 
    {
        return node.getElementsByClassName(classname);
    } else 
    {
        var results = new Array();
        var elems = node.getElementsByTagName(&quot;*&quot;);
        for (var i = 0; i &lt; elems.length; i++)
        {
            if (elems[i].className.indexOf(className) != -1)
            {
                results[results.length] = elems[i];
            }
        }
        return results;
    }
}
</code></pre>
<ul>
<li>每个节点都是一个对象。</li>
</ul>
<h2 id="获取和设置属性"><a href="#获取和设置属性" class="headerlink" title="获取和设置属性"></a>获取和设置属性</h2><h3 id="getAttribute"><a href="#getAttribute" class="headerlink" title="getAttribute"></a>getAttribute</h3><pre><code class="JavaScript">object.getAttribute(attribute)

if(something) 等价于 if(something != null) 完全等价
</code></pre>
<h3 id="setAttribute"><a href="#setAttribute" class="headerlink" title="setAttribute"></a>setAttribute</h3><pre><code class="JavaScript">object.setAttribute(attribute, value)

var shopping = document.getElementById(&quot;purchases&quot;);
shopping.setAttribute(&quot;title&quot;, &quot;a list of goods&quot;);
</code></pre>
<ul>
<li>可以覆盖已有属性的值</li>
</ul>
<h1 id="案例研究：JavaScript-图片库"><a href="#案例研究：JavaScript-图片库" class="headerlink" title="案例研究：JavaScript 图片库"></a>案例研究：JavaScript 图片库</h1><ul>
<li>DOM 是一种适用于多种环境和多种程序设计语言的通用型 API。</li>
<li>若一个站点用到多个 JavaScript 文件，为了减少对站点的请求次数（提高性能），应该把这些 <code>.js</code> 文件合并到一个文件中。</li>
</ul>
<h2 id="事件处理函数"><a href="#事件处理函数" class="headerlink" title="事件处理函数"></a>事件处理函数</h2><ul>
<li>在特定事件发生时调用特定的 JavaScript 代码。</li>
</ul>
<pre><code class="JavaScript">event = &quot;Javascript statement(s)&quot;
// JavaScript 代码包含在一对引号之间。我们可以把任意数量的 JavaScript 语句放在这对引号之间，只要把各条语句用分号隔开即可。
</code></pre>
<ul>
<li><code>onmouseover</code></li>
<li><code>onmouseout</code></li>
<li><p><code>onclick</code></p>
</li>
<li><p>在给某个元素添加了事件处理函数后，一旦事件发生，相应的 JavaScript 代码就会得到执行。被调用的 JavaScript 代码可以返回一个值，这个值将被传递给那个事件处理函数。</p>
</li>
</ul>
<pre><code class="JavaScipt">onclick=&quot;return false&quot;; // 点击不会触发
</code></pre>
<h2 id="函数扩展"><a href="#函数扩展" class="headerlink" title="函数扩展"></a>函数扩展</h2><h3 id="childNodes-属性"><a href="#childNodes-属性" class="headerlink" title="childNodes 属性"></a>childNodes 属性</h3><ul>
<li>在一棵节点树，chindNodes 属性可以用来获取任何一个元素的所有子元素。</li>
<li>它是一个包含这个元素全部子元素的数组 <code>element.chindNodes</code></li>
</ul>
<h3 id="nodeType-属性"><a href="#nodeType-属性" class="headerlink" title="nodeType 属性"></a>nodeType 属性</h3><ul>
<li><code>node.nodeType</code></li>
<li><p>nodeType 属性总共有 12 种可取值，但其中仅有 3 种具有实用价值。</p>
<ul>
<li>元素节点的 nodeType 属性值是 1 </li>
<li>属性节点的 nodeType 属性值是 2</li>
<li>文本节点的 nodeType 属性值是 3</li>
</ul>
</li>
</ul>
<h3 id="nodeValue-属性"><a href="#nodeValue-属性" class="headerlink" title="nodeValue 属性"></a>nodeValue 属性</h3><ul>
<li>得到和设置文本节点的值 <code>node.nodeValue</code></li>
</ul>
<pre><code class="JavaScript">description.nodeValue; // null
// 文本也是另一种节点，是 description 节点的第一个子节点
description.childNodes[0].nodeValue;
</code></pre>
<h3 id="firstChild-和-lastChild-属性"><a href="#firstChild-和-lastChild-属性" class="headerlink" title="firstChild 和 lastChild 属性"></a>firstChild 和 lastChild 属性</h3><ul>
<li><code>node.firstChild</code> 等价于 <code>node.childNodes[0]</code></li>
<li><code>node.lastChild</code>  <code>node.childNodes[node.childNodes.length - 1]</code></li>
</ul>
<h1 id="最佳实践"><a href="#最佳实践" class="headerlink" title="最佳实践"></a>最佳实践</h1><h2 id="过去的错误"><a href="#过去的错误" class="headerlink" title="过去的错误"></a>过去的错误</h2><h3 id="不要怪罪-JavaScript"><a href="#不要怪罪-JavaScript" class="headerlink" title="不要怪罪 JavaScript"></a>不要怪罪 JavaScript</h3><h3 id="Flash-的遭遇"><a href="#Flash-的遭遇" class="headerlink" title="Flash 的遭遇"></a>Flash 的遭遇</h3><h3 id="质疑一切"><a href="#质疑一切" class="headerlink" title="质疑一切"></a>质疑一切</h3><h2 id="平稳退化"><a href="#平稳退化" class="headerlink" title="平稳退化"></a>平稳退化</h2><ul>
<li>如果正确地使用了 JavaScript 脚本，就可以让访问者在他们浏览器不支持 JavaScript （或者禁用 JavaScript ）的情况下任能顺利地浏览你网站。</li>
<li><p>虽然某些功能无法使用，但最基本的操作仍能顺利完成。</p>
</li>
<li><p>应该只在绝对必要的情况下才使用弹出窗口，因为这将牵涉到网页的可访问性问题。</p>
</li>
<li><p>如果网页上的某个链接将弹出新窗口，最好在这个链接本身的文字中予以说明。</p>
</li>
<li><p>JavaScript 使用 window 对象的 open() 方法来创建新的浏览器窗口。</p>
</li>
</ul>
<pre><code class="JavaScript">window.open(url, name, features)
// 三个参数都是可选的
// url 是想在新窗口里打开的网页的 URL 地址。如果省略这个参数，屏幕上将弹出一个空白的浏览器窗口
// name 是新窗口的名字。可以在代码中通过这个名字与新窗口进行通信。
// features 是一个以逗号分隔的字符串，其内容是新窗口的各种属性。新窗口的尺寸以及新窗口被启用或禁用的各种浏览功能。（新窗口的浏览功能要少而精）

function popUp(winURL)
{
    window.open(winURL, &quot;popup&quot;, &quot;width=320, height=480&quot;);
}
</code></pre>
<ul>
<li><p>open() 方法是使用 BOM 的一个好案例，它的功能对文档的内容也无任何影响（那是 DOM 的地盘）。这个方法只与浏览环境有关。</p>
</li>
<li><p>调用 popUp 函数的一个办法是使用伪协议（ pseudo-protocol ）</p>
</li>
</ul>
<h3 id="“javascript-”-伪协议"><a href="#“javascript-”-伪协议" class="headerlink" title="“javascript:” 伪协议"></a>“javascript:” 伪协议</h3><ul>
<li>“真”协议用来在因特网上的计算机之间传输数据包，如 HTTP 协议(<a href="http://)，FTP" target="_blank" rel="external">http://)，FTP</a> 协议(ftp://) 等。</li>
<li>伪协议则是一种非标准化的协议。”javascript:” 伪协议让我们通过一个链接来调用 JavaScript 函数。</li>
</ul>
<pre><code class="JavaScript">&lt;a href=&quot;javascript:popUp(&#39;http://www.example.com/&#39;);&quot;&gt;Example&lt;/a&gt;
// 这条语句在支持 &quot;javascript:&quot; 伪协议的浏览器中运行正常
// 较老的浏览器则会去尝试打开那个链接但失败
// 支持这种伪协议但禁用了 JavaScript 功能的浏览器会什么也不做。
</code></pre>
<ul>
<li>在 HTML 文档里通过 “javascript:” 伪协议调用 JavaScript 代码的做法非常不好。</li>
</ul>
<h3 id="内嵌的事件处理函数"><a href="#内嵌的事件处理函数" class="headerlink" title="内嵌的事件处理函数"></a>内嵌的事件处理函数</h3><pre><code class="JavaScript">&lt;a href=&quot;#&quot; onclick=&quot;popUp(&#39;http://www.example.com/&#39;); return false;&quot;&gt;Example&lt;/a&gt;

// # 符号是一个仅供文档内部使用的链接记号（单就这条指令而言，&quot;#&quot; 是未指向任何目标的内部链接）。在某些浏览器里，&quot;#&quot; 链接指向当前文档的开头。
// 把 href 属性设置为 &quot;#&quot; 只是为了创建一个空链接。
</code></pre>
<ul>
<li>这个技巧与用 “javascript:” 伪协议调用 JavaScript 代码的做法同样糟糕，因为它们都不能平稳退化。</li>
<li>如果用户禁用了浏览器的 JavaScript 功能，这样的链接将毫无用处。</li>
</ul>
<h3 id="谁关心这个"><a href="#谁关心这个" class="headerlink" title="谁关心这个"></a>谁关心这个</h3><ul>
<li>如果你的 JavaScript 网页不能平稳退化，它们在搜索引擎上的排名就可能大受损害。</li>
</ul>
<pre><code class="JavaScript">// 为其中的 JavaScript 代码预留出退路，在链接里把 href 属性设置为真实存在的 URL 地址，让它成为一个有效的链接。
&lt;a href=&quot;http://www.example.com/&quot; onclick=&quot;popUp(&#39;http://www.example.com&#39;); return false;&quot;&gt;Example&lt;/a&gt;

&lt;a href=&quot;http://www.example.com/&quot; onclick=&quot;popUp(this.getAttribute(&#39;href&#39;));return false;&quot;&gt;Example&lt;/a&gt;

// 使用 DOM 提供的 this.href 属性
&lt;a href=&quot;http://www.example.com/&quot; onclick=&quot;popUp(this.href); return false;&quot;&gt;Example&lt;/a&gt;
</code></pre>
<ul>
<li>在把 href 属性设置为真实存在的 URL 地址后，即使 JavaScript 已被禁用（或遇到搜索机），这个链接也是可用的。</li>
<li><p>不足</p>
<ul>
<li>每当需要打开新窗口时，就不得不把一些 JavaScript 代码嵌入标记文档中。</li>
<li>如果能把包括事件处理函数在内的所有 JavaScript 代码全都放在外部文件里，这个技巧将更加完善。</li>
</ul>
</li>
</ul>
<h2 id="向-CSS-学习"><a href="#向-CSS-学习" class="headerlink" title="向 CSS 学习"></a>向 CSS 学习</h2><h3 id="结构与样式的分离"><a href="#结构与样式的分离" class="headerlink" title="结构与样式的分离"></a>结构与样式的分离</h3><ul>
<li>CSS 层叠样式表</li>
<li>CSS 技术的最大优点是，它能够帮助你将 Web 文档的内容结构（标记）和版面设计（样式）分离开来。</li>
<li><p>真正从 CSS 技术获益的方法，是把样式全部转移到外部文件中去。</p>
</li>
<li><p>文档结构与文档样式的分离可以确保网页都能平稳退化。</p>
</li>
</ul>
<h3 id="渐进增强"><a href="#渐进增强" class="headerlink" title="渐进增强"></a>渐进增强</h3><ul>
<li>标记良好的内容就是一切</li>
<li>CSS 指令构成了一个表示层。</li>
<li><p>渐进增强，就是用一些额外的信息层去包裹原始数据。按照 “渐进增强” 原则创建出来的网页几乎（如果不是 “全部” 的话）都符合 “平稳退化” 原则。</p>
</li>
<li><p>JavaScript 和 DOM 提供的所有功能也应该构成了一个额外的指令层。CSS 代码负责提供关于 “表示” 的信息，JavaScript 代码负责提供关于 “行为” 的信息。</p>
</li>
<li>行为层的应用方式与表示层一样。</li>
<li>推荐做法，先把样式信息存入一个外部文件，再在文档的 head 部分用 <link> 标签来调用这个文件。</li>
<li>class 属性是样式与文档内容之间的联结纽带。</li>
</ul>
<h2 id="分离-JavaScript"><a href="#分离-JavaScript" class="headerlink" title="分离 JavaScript"></a>分离 JavaScript</h2><ul>
<li>在 HTML 文档里使用诸如 onclick 之类的属性也是一种即没有效率又容易引发问题的做法。</li>
<li>如果我们用一个 “挂钩”， 就像 CSS 机制中的 class 或 id 属性那样，把 JavaScript 代码调用行为与 HTML 文档的结构和内容分离开，网页就会健壮多。</li>
</ul>
<pre><code class="JavaScript">element.event = action...
getElementById(id).event = action

// 多个元素
getElementByTagName 和 getAttribute 把事件添加到有特定属性的一组元素上。

var links = document.getElementsByTagName(&quot;a&quot;);
for (var i = 0; i &lt; links.length; i++)
{
    if (links[i].getAttribute(&quot;class&quot;) === &quot;popup&quot;)
    {
        links[i].onclick = function()
        {
            popUp(this.getAttribute(&quot;href&quot;));
            return false;
        };
    }
}
</code></pre>
<ul>
<li><p><code>var links = document.getElementByTagName(&quot;a&quot;)</code> 存入外部 JavaScript 文件，它们将无法正常运行。</p>
<ul>
<li>这条语句将在 JavaScript 文件被加载时立刻执行。</li>
<li>如果 JavaScript 文件是在从 HTML 文档的 <code>&lt;head&gt;</code> 部分用 <code>&lt;script&gt;</code> 标签调用的，它将在 HTML 文档之前加载到浏览器。</li>
<li>如果 <code>&lt;script&gt;</code> 标签位于文档底部 <code>&lt;/body&gt;</code> 之前，就不能保证哪个文件最先结束加载（浏览器可能一次加载多个）。</li>
<li>因为脚被加载时文档可能不完整，所以模型也不完整。没有完整的 DOM，getElementsByTagName 等方法就不能正常工作。</li>
</ul>
</li>
<li><p>必须让这些代码在 HTML 文档全部加载到浏览器之后马上开始执行。</p>
<ul>
<li>HTML 文档全部加载完毕时将触发一个事件，这个事件有它自己的事件处理函数。</li>
<li>文档将被加载到一个浏览器窗口里，document 对象又是 window 对象的一个属性。当 window 对象触发 onload 事件时，document 对象已经存在。</li>
</ul>
</li>
</ul>
<pre><code class="JavaScript">// 把这个函数添加到 window 对象的 onload 事件上去。
window.onload=prepareLinks;
function prepareLinks()
{
    var links = document.getElementByTagName(&quot;a&quot;);
    ..
}
</code></pre>
<h2 id="向后兼容"><a href="#向后兼容" class="headerlink" title="向后兼容"></a>向后兼容</h2><ul>
<li>比较古老的浏览器却很可能无法理解 DOM 提供的方法和属性。</li>
</ul>
<h3 id="对象检测"><a href="#对象检测" class="headerlink" title="对象检测"></a>对象检测</h3><ul>
<li>检测浏览器对 JavaScript 的支持程度。</li>
<li>只要把某个方法打包在一个 if 语句里，就可以根据这条 if 语句的条件表达式的求值结果是 true （存在） 还是 false（不存在）来决定应该采取怎样的行动。这种检测称为对象检测（object detection）</li>
</ul>
<pre><code class="JavaScript">// 在使用对象检测时，一定要删掉方法名后面的圆括号，如果不删掉，测试的将是方法的结果，无论方法是否存在。
function myFunction()
{
    if (document.getElementById)
    {
        statements using getElementById
    }
}
</code></pre>
<ul>
<li><p>不足</p>
<ul>
<li>如此编写出来的函数会增加一对花括号。如果需要在检测多个 DOM 方法和属性是否存在，这个函数中最重要的语句就会被深埋在一层又一层的花括号里。这样的代码很难阅读和理解。</li>
</ul>
</li>
<li><p>测试条件改为 “如果你不理解这个方法，请离开” 则更简单。</p>
</li>
</ul>
<pre><code class="JavaScript">if (!getElementById) return false;
if (!getElementById || !getElementById) return false;

if (!document.getElementByTagName) return false;
</code></pre>
<h3 id="浏览器嗅探技术"><a href="#浏览器嗅探技术" class="headerlink" title="浏览器嗅探技术"></a>浏览器嗅探技术</h3><ul>
<li>通过提取浏览器供应商提供的信息来解决向后兼容问题。</li>
<li><p>理论上讲，可以通过 JavaScript 代码检索关于浏览器品牌和版本的信息，这些信息可以用来改善 JavaScript 脚本代码的向后兼容性，但这是一种风险非常大的技术。</p>
</li>
<li><p>首先，浏览器有时会 “撒谎”。因为历史原因，有些浏览器会把自己报告为另外一种浏览器，还有一些浏览器允许用户任意修改这些信息。</p>
</li>
</ul>
<h2 id="性能考虑"><a href="#性能考虑" class="headerlink" title="性能考虑"></a>性能考虑</h2><h3 id="尽量少访问-DOM-和尽量减少标记"><a href="#尽量少访问-DOM-和尽量减少标记" class="headerlink" title="尽量少访问 DOM 和尽量减少标记"></a>尽量少访问 DOM 和尽量减少标记</h3><pre><code class="JavaScript">if (document.getElementsByTagName(&quot;a&quot;).length &gt; 0)
{
    var links = document.getElementsByTagName(&quot;a&quot;);
    for (var i = 0; i &lt; links.length; i++)
    {
        //..
    }
}
// 只要是查询 DOM 中的某些元素，浏览器都会搜索整个 DOM 树，从中查找可能匹配的元素。
// 这段代码使用两次 getElementByTagName 方法去执行相同的操作，浪费一次搜索。应该把搜索结果存到变量中，重用。
</code></pre>
<ul>
<li><p>在多个函数都会取得一组类似元素的情况下，可以考虑重构代码，把搜索结果保存在一个全局变量里，或者把一组元素直接以参数形式传递给函数。</p>
</li>
<li><p>减少文档中的标记数量。过多不必要的元素只会增加 DOM 树的规模，进而增加遍历 DOM 树以查找特定的元素的时间。</p>
</li>
</ul>
<h3 id="合并和放置脚本"><a href="#合并和放置脚本" class="headerlink" title="合并和放置脚本"></a>合并和放置脚本</h3><pre><code class="JavaScript">&lt;script src=&quot;script/function.js&quot;&gt;&lt;/script&gt;
</code></pre>
<ul>
<li>合并到一个脚本文件中。可以减少加载页面时发送的请求数量。</li>
<li><p>脚本在标记中的位置对页面的初次加载时间也有很大影响。</p>
<ul>
<li>传统上，我们把脚本放在文档的 <code>&lt;head&gt;</code> 区域，这种放置方法有一个问题。位于 <code>&lt;head&gt;</code> 块中的脚本会导致浏览器无法并行加载其他文件（如图像或其他急脚本）。</li>
<li>一般来说，根据 HTTP 规范，浏览器每次从同一个域名中最多只能同时下载两个文件。而在下载脚本期间，浏览器不会下载其他任何文件，即使是来自不同域名的文件也不会下载，所有其他资源都要等脚本加载完毕后才能下载。</li>
</ul>
</li>
<li><p>把所有 <code>&lt;script&gt;</code> 标签都放到文档的末尾，<code>&lt;/body&gt;</code> 标记之前，就可以让页面变得更快。</p>
</li>
</ul>
<h3 id="压缩脚本"><a href="#压缩脚本" class="headerlink" title="压缩脚本"></a>压缩脚本</h3><ul>
<li>把脚本文件中不必要的字节，如空格和注释，统统删除，从而达到”压缩” 文件的目的。</li>
<li>多数情况下，你应该有两个版本，一个时工作副本，可以修改代码并添加注释；另一个时精简副本，用于放在站点上。</li>
<li><p>最好在精简副本的文件名中加上 min 字样。<code>scriptName.min.js</code></p>
</li>
<li><p>代码压缩工具</p>
<ul>
<li>Douglas Crockford 的 JSMin</li>
<li>雅虎的 YUI Compressor</li>
<li>谷歌的 Closure Compiler</li>
</ul>
</li>
</ul>
<h1 id="案例研究：图片库改进版"><a href="#案例研究：图片库改进版" class="headerlink" title="案例研究：图片库改进版"></a>案例研究：图片库改进版</h1><ul>
<li><p>如果想用 JavaScript 给某个网页添加一些行为，就不应该让 JavaScript 代码对这个网页的结构有任何依赖。</p>
</li>
<li><p>结构话程序设计</p>
<ul>
<li>函数应该只有一个入口和一个出口。</li>
</ul>
</li>
<li><p>在实际工作中，过分拘泥于这项原则往往会使代码变得非常难以阅读。如果为了避免留下多个出口点而去改写那些 if 语句的话，这个函数的核心代码就会被掩埋在一层又一层的花括号里。</p>
</li>
<li><p>如果一个函数有多个出口，只要这些出口集中出现在函数的开头部分，就是可以接受的。</p>
</li>
<li><p>把充当循环计数器的变量命名为 “i” 是一种传统做法。字母 “i” 在这里的含义是 “increment” (递增) 。</p>
</li>
</ul>
<h3 id="共享-onload-事件"><a href="#共享-onload-事件" class="headerlink" title="共享 onload 事件"></a>共享 onload 事件</h3><pre><code class="JavaScript">// 让这个函数在网页加载完毕之后立刻执行。
window.onload = prepareGallery;

// 多个绑定函数
window.onload = firstFunction;
window.onload = secondFunction; // 它们当中只有最后那个才会被实际执行，每个事件处理函数只能绑定一条指令。

window.onload = function()
{
    firstFunction();
    secondFunction();
} // 在需要绑定的函数不是很多的场合，这是最简单的解决方案。
</code></pre>
<ul>
<li>弹性解决方案：不管加载完毕时执行多少个函数，它都可以应付自如。</li>
<li><p>addLoadEvent 函数，只有一个参数，打算在页面加载完毕时执行的函数的名字。</p>
<ul>
<li>把现有的 window.onload 事件处理函数的值存入变量 oldonload</li>
<li>如果在这个处理函数上还没有绑定任何函数，就像平时那样把新函数添加给它</li>
<li>如果在这个处理函数上已经绑定了一些函数，就把新函数追加到现有指令的末尾</li>
</ul>
</li>
</ul>
<pre><code class="JavaScript">function addLoadEvent(func)
{
    var oldonload = window.onload;
    if (typeof window.onload != &#39;function&#39;)
    {
        window.onload = func;
    } else
    {
        window.onload = function()
        {
            oldonload();
            func();
        }
    }
}

// 这将把那些在页面加载完毕时执行的函数创建为一个队列。
</code></pre>
<h2 id="不要做太多的假设"><a href="#不要做太多的假设" class="headerlink" title="不要做太多的假设"></a>不要做太多的假设</h2><pre><code class="JavaScript">links[i].onclick = function ()
{
  return !showPic(this);
};
// 如果 showPic 返回 true 我们就返回 false,浏览器不会打开那个链接
// 如果 showPic 返回 false ，那么我们认为图片没有更新，于是返回 true 以允许默认行为发生。
</code></pre>
<h2 id="优化"><a href="#优化" class="headerlink" title="优化"></a>优化</h2><pre><code class="JavaScript">if (whichpic.getAttribute(&quot;title&quot;))
{
    var text = whichpic.getAttribute(&quot;title&quot;);
} else
{
    var text = &quot;&quot;;
}

var text = whichpic.getAttribute(&quot;title&quot;) ? whichpic.getAttribute(&quot;title&quot;) : &quot;&quot;;

variable = condition ? if true : if false;

if (placeholder.nodeName != &quot;IMG&quot;) return false;
// nodeName 属性总是返回一个大写字母的值，即使元素在 HTML 文档里是小写字母。
</code></pre>
<ul>
<li>在实际工作中，你要自己决定是否真的需要这些检查。它们针对的是 HTML 文档有可能不在你控制范围内的情况。</li>
</ul>
<h2 id="键盘访问"><a href="#键盘访问" class="headerlink" title="键盘访问"></a>键盘访问</h2><ul>
<li>并非所有的用户都使用鼠标。</li>
<li>键盘上的 Tab 键可以让我们从个这个链接移动到另一个链接，按下回车键将启用当前链接。</li>
<li>按下键盘上任何一个键都会触发 onkeypress 事件。</li>
</ul>
<pre><code class="JavaScript">// 让 onkeypress 事件与 onclick 事件触发同样的行为
// 复制一份
links[i].onclick = function()
{
    return showPic(this) ? false : true;
}
links[i].onkeypress = function()
{
    return showPic(this) ? false : true;
}
// 或者
links[i].onkeypress = links[i].onclick;
</code></pre>
<ul>
<li><p>小心 onkeypress</p>
<ul>
<li>几乎所有浏览器里，用 Tab 键移动到某个链接然后按下回车键的动作也会触发 onclick 事件。</li>
<li>最好不要使用 onkeypress 事件处理函数。</li>
</ul>
</li>
</ul>
<h2 id="把-JavaScript-与-CSS-结合起来"><a href="#把-JavaScript-与-CSS-结合起来" class="headerlink" title="把 JavaScript 与 CSS 结合起来"></a>把 JavaScript 与 CSS 结合起来</h2><ul>
<li>挂钩 - id</li>
</ul>
<h2 id="DOM-Core-和-HTML-DOM"><a href="#DOM-Core-和-HTML-DOM" class="headerlink" title="DOM Core 和 HTML-DOM"></a>DOM Core 和 HTML-DOM</h2><pre><code class="JavaScript">getElementById
getElementByTagName
getAttribute
setAttribute
// 这些方法是 DOM Core 的组成部分。它们并不专属于 JavaScript ，支持 DOM 的任何一种程序设计语言都可以使用它们。
// 可以处理任何一种标记语言（xml）编写处理啊的文档。

// 在 JavaScript 语言和 DOM 为 HTML 文件编写脚本时，还有许多属性可供选用。

// HTML-DOM提供了一个 forms 对象
document.getElementByTagName(&quot;form&quot;)
document.forms

// HTML-DOM 还提供了许多描述各种 HTML 元素的属性。
element.getAttribute(&quot;src&quot;)
element.src
</code></pre>
<ul>
<li>这些方法和属性可以相互替换。同样的操作可以只使用 DOM Core 来实现，也可以使用 HTML-DOM 来实现。</li>
<li>HTML-DOM 代码通常会更短，它们只能用来处理 Web 文档。</li>
</ul>
<pre><code class="JavaScript">var source = whichpic.href;
placeholder.src = source;
</code></pre>
<h2 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h2><ul>
<li>尽量让我的 JavaScript 代码不再依赖于那些没有保证的假设，为此我引入了许多项测试和检查。这些测试和检查使我的 JavaScript 代码能够平稳退化。</li>
<li>没有使用 onkeypress 事件处理函数，这使我的 JavaScript 代码的可访问性得到了保证。</li>
<li><p>最重要的是把事件处理函数从标记文档分离到了一个外部的 JavaScript 文件。这使我的 JavaScript 代码不再依赖于 HTML 文档的内容和结构。</p>
</li>
<li><p>结构与行为的分离程度越大越好。</p>
</li>
</ul>
<h1 id="动态创建标记"><a href="#动态创建标记" class="headerlink" title="动态创建标记"></a>动态创建标记</h1><ul>
<li>网页的结构由标记负责创建，JavaScript 函数只用来改变某些细节而不改变其底层结构。JavaScript 也可以用来改变网页的结构和内容。</li>
</ul>
<h2 id="一些传统方法"><a href="#一些传统方法" class="headerlink" title="一些传统方法"></a>一些传统方法</h2><h3 id="document-write"><a href="#document-write" class="headerlink" title="document.write"></a>document.write</h3><ul>
<li>document 对象的 write() 方法可以方便快捷地把字符串插入到文档里。</li>
</ul>
<pre><code class="JavaScript">document.write(&quot;&lt;p&gt;This is inserted.&lt;/p&gt;&quot;)
// 违背了 &quot;行为应该与表现分离&quot; 的原则。
</code></pre>
<ul>
<li>JavaScript 和 HTML 代码混杂在一起是一种很不好的做法。</li>
<li>MIME 类型 application/xhtml+xml 与 document.write 不兼容，浏览器在呈现这种 XHTML 文档时根本不会执行 document.write 方法。</li>
</ul>
<h3 id="innerHTML-属性"><a href="#innerHTML-属性" class="headerlink" title="innerHTML 属性"></a>innerHTML 属性</h3><ul>
<li>写某给定元素里的 HTML 内容。</li>
</ul>
<pre><code class="JavaScript">window.onload = functiton()
{
    var testdiv = document.getElementById(&quot;testdiv&quot;);
    testdiv.innerHTML = &quot;&lt;p&gt;I inserted &lt;em&gt;this&lt;/em&gt; content.&lt;/p&gt;&quot;;
}
// testdiv 元素里有没有 HTML 内容无关紧要：一旦你使用了 innerHTML 属性，它的全部内容都将被替换。
// innerHTML 属性不会返回任何对刚插入的内容的引用。
</code></pre>
<ul>
<li>类似于 document.write 方法，innerHTML 属性也是 HTML 专有属性，不能用于任何其他标记语言。浏览器在呈现正宗的 XHTML 文档时会直接忽略掉 innerHTML 属性。</li>
</ul>
<h2 id="DOM-方法"><a href="#DOM-方法" class="headerlink" title="DOM 方法"></a>DOM 方法</h2><ul>
<li>DOM 是文档的表示。</li>
</ul>
<h3 id="createElement-方法"><a href="#createElement-方法" class="headerlink" title="createElement 方法"></a>createElement 方法</h3><pre><code class="JavaScript">var para = document.createElement(&quot;p&quot;);
// 新创建的 p 元素已经存在，但它还不是任何一颗 DOM 节点树的组成部分。称为文档碎片。
// 已经像任何其他的节点那样有了自己的 DOM 属性。
// 元素节点
</code></pre>
<h3 id="appendChild-方法"><a href="#appendChild-方法" class="headerlink" title="appendChild 方法"></a>appendChild 方法</h3><pre><code class="JavaScript">// 成为这个文档某个现有节点的一个字节点。
parent.appendChild(child);

var testdiv = document.getElementById(&quot;testdiv&quot;);
var para = document.createElement(&quot;p&quot;);
testdiv.appendChild(para);
// 合并为 1 行，使得代码很难阅读和理解。
</code></pre>
<h3 id="createTextNode-方法"><a href="#createTextNode-方法" class="headerlink" title="createTextNode 方法"></a>createTextNode 方法</h3><ul>
<li>创建一个文本节点</li>
</ul>
<pre><code class="JavaScript">document.createTextNode(text);

var txt = document.createTextNode(&quot;Hello World!&quot;);
para.appendChild(text);
</code></pre>
<h2 id="重回图片库"><a href="#重回图片库" class="headerlink" title="重回图片库"></a>重回图片库</h2><pre><code class="JavaScript">// 这个XHTML 文件中有一个图片和一段文字仅仅是为 showPic 脚本服务的。
document.getElementsByTagName(&quot;body&quot;)[0].appendChild(placeholder);
    document.getElementsByTagName(&quot;body&quot;)[0].appendChild(description);

// HTML-DOM
document.body.appendChild(placeholder);
document.body.appendChild(description);
</code></pre>
<ul>
<li>上面两种方法都会把元素插入到位于文档末尾的 <code>&lt;/body&gt;</code> 标签之前。</li>
</ul>
<h3 id="在已有元素前插入一个新元素"><a href="#在已有元素前插入一个新元素" class="headerlink" title="在已有元素前插入一个新元素"></a>在已有元素前插入一个新元素</h3><ul>
<li>DOM 提供了名为 insertBefore() 方法，这个方法将把一个新元素插入到一个现有元素的前面。</li>
</ul>
<pre><code class="JavaScript">parentElement.insertBefore(newElement, targetElement);
// 元素节点的父元素必须是另一个元素节点（属性节点和文本节点的子元素不允许是元素节点）

var gallery = document.getElementById(&quot;imagegallery&quot;);
gallery.parentNode.insertBefore(placeholder, gallery);
</code></pre>
<h3 id="在现有方法后插入一个新元素"><a href="#在现有方法后插入一个新元素" class="headerlink" title="在现有方法后插入一个新元素"></a>在现有方法后插入一个新元素</h3><ul>
<li>DOM 没有提供 <code>insertAfter()</code> 方法。</li>
</ul>
<pre><code class="JavaScript">function insertAfter(newElement, targetElement)
{
    var parent = targetElement.parentNode;
    if (parent.lastChild === targetElement)
    {
        parent.appendChild(newElement);
    } else
    {
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}
</code></pre>
<ul>
<li>目标元素的下一个兄弟元素即目标元素的 nextSibling 属性。</li>
</ul>
<h2 id="Ajax"><a href="#Ajax" class="headerlink" title="Ajax"></a>Ajax</h2><ul>
<li>可以只更新页面中的一小部分。其他内容-标志，导航，头部，脚部都不用重新加载。</li>
<li>Ajax 的主要优势就是对页面的请求以异步方式发送到服务器。而服务器不会用整个页面来响应请求，它会在后台处理请求，与此同时用户还能继续浏览页面并与页面交互。</li>
<li>Ajax 有它自己的适用范围。它依赖 JavaScript，所以可能会有浏览器不支持它，而搜索引擎的蜘蛛程序也不会抓取到有关内容。</li>
</ul>
<h3 id="XMLHttpRequest-对象"><a href="#XMLHttpRequest-对象" class="headerlink" title="XMLHttpRequest 对象"></a>XMLHttpRequest 对象</h3><ul>
<li>Ajax 技术的核心就是 XMLHttpRequest 对象。这个对象充当着浏览器中的脚本（客户端）和服务器之间的中间人的角色。以往的请求都是由浏览器发出，而 JavaScript 通过这个对象可以自己发送请求，同时也自己处理响应。</li>
</ul>
<pre><code class="JavaScript">// getHTTPObject.js
function getHTTPObject()
{
    if (typeof XMLHttpRequest === &quot;undefined&quot;)
    {
        XMLHttpRequest = function ()
        {
            try
            {
                return new ActiveXObject(&quot;Msxml2.XMLHTTP.6.0&quot;);
            }
            catch (e)
            {
            }
            try
            {
                return new ActiveXObject(&quot;Msxml2.XMLHTTP.3.0&quot;);
            }
            catch (e)
            {
            }
            try
            {
                return new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;);
            }
            catch (e)
            {
            }
            return false;
        };
        return new XMLHttpRequest();
    }
}

// getNewContent.js
function getNewContent()
{
    var request = getHTTPObject();
    if (request)
    {
        request.open(&quot;GET&quot;, &quot;example.txt&quot;, true); // 指定服务器上将要访问的文件，指定请求类型。第三个参数用于指定请求是否以异步方式发送和处理。
        request.onreadystatechange = function()
        {
            if (request.readyState === 4)
            {
                var para = document.createElement(&quot;p&quot;);
                var txt = document.createTextNode(request.responseText);
                para.appendChild(txt);
                document.getElementById(&quot;new&quot;).appendChild(para);
            }
        };
        request.send(null);
    } else
    {
        alert(&quot;Sorry, your brower does&#39;t support XMLHTTPRequest&quot;);
    }
}
addLoadEvent(getNewContent());
</code></pre>
<ul>
<li><p>onreadystatechange 事件处理函数 在服务器给 XMLHttpRequest 对象送回响应的时候被触发执行。</p>
<ul>
<li>也可以引用一个函数。不要在函数名后面加括号。加括号表示立即调用函数。</li>
</ul>
</li>
<li><p>readyState 属性值</p>
<ul>
<li>0 表示未初始化</li>
<li>1 表示正在加载</li>
<li>2 表示加载完毕</li>
<li>3 表示正在交互</li>
<li>4 表示完成</li>
</ul>
</li>
<li><p>访问服务器发送回来的数据要通过两个属性完成。</p>
<ul>
<li>responseText 属性，用于保存文本字符串形式的数据</li>
<li>responseXML 属性，用于保存 Content-Type 头部中指定为 “Text/xml” 的数据，是一个 DocumentFragment 对象。可使用各种 DOM 方法来处理这个对象。</li>
</ul>
</li>
<li><p>在使用 Ajax 时，千万要注意同源策略。使用 XMLHttpRequest 对象发送的请求只能访问与其所在的 HTML 处于同一个域中的数据，不能向其他域发送请求。</p>
</li>
<li><p>有些浏览器还会限制 Ajax 请求使用的协议。</p>
</li>
<li><p>Ajax 应用的特色就是减少重复加载页面的次数。但这种缺少状态记录的技术会与浏览器的一些使用惯例产生冲突，导致用户无法使用后退按钮或者无法为特定状态下的页面添加书签。</p>
</li>
<li>理想情况下，用户的每一次操作都应该得到一个清晰明确的结果。</li>
</ul>
<h3 id="渐进增强与-Ajax"><a href="#渐进增强与-Ajax" class="headerlink" title="渐进增强与 Ajax"></a>渐进增强与 Ajax</h3><ul>
<li>构建 Ajax 网站的最好方法，也是先构建一个常规的网站，然后 Hijax 它。</li>
</ul>
<h3 id="Hijax-渐进增强地使用-Ajax"><a href="#Hijax-渐进增强地使用-Ajax" class="headerlink" title="Hijax - 渐进增强地使用 Ajax"></a>Hijax - 渐进增强地使用 Ajax</h3><ul>
<li><p>登陆页面</p>
<ul>
<li>拦截提交表单的请求，让 XMLHttpRequest 请求来代为发送。提交表单触发的是 submit 事件，因此只要通过 onsubmit 事件处理函数捕获该事件，就可以取消它的默认操作（提交整个页面）。</li>
</ul>
</li>
<li>Ajax 应用主要依赖于服务器端处理，而非客户处理。</li>
<li>hijack 劫持 拦截用户操作触发的请求。</li>
</ul>
<h1 id="充实文档的内容"><a href="#充实文档的内容" class="headerlink" title="充实文档的内容"></a>充实文档的内容</h1><h2 id="不应该做什么"><a href="#不应该做什么" class="headerlink" title="不应该做什么"></a>不应该做什么</h2><ul>
<li><p>如果你觉察到自己正在使用 DOM 技术把一些重要的内容添加到网页上，则应该立刻停下来去检讨你的计划和思路。</p>
<ul>
<li>渐进增强。你应该总是从最核心的部分，也就是从内容开始。应该根据内容使用标记实现良好的结构，然后再逐步加强这些内容。这些增强工作既可以是通过 CSS 改进呈现效果，也可以是通过 DOM 添加各种行为。</li>
<li>平稳退化。渐进增强的实现必然支持平稳退化。</li>
</ul>
</li>
</ul>
<h2 id="把-“不可见”-变成-“可见”"><a href="#把-“不可见”-变成-“可见”" class="headerlink" title="把 “不可见” 变成 “可见”"></a>把 “不可见” 变成 “可见”</h2><ul>
<li><p><code>display</code> : <code>inline</code> <code>block</code> <code>none</code></p>
</li>
<li><p><code>abbr</code> 标签含义是 “缩略图”(abbreviation)是对单词或短语的简写形式的统称。</p>
</li>
<li><code>acronym</code> 标签的含义是被当作一个单词来读的 “首字母缩写词” (acronym)，所有的首字母缩略词都是缩略语，但不是所有的缩略语都是首字母缩略词。HTML5 中 <acronym> 标签已被 <abbr> 标签代替</abbr></acronym></li>
</ul>
<h3 id="选用-HTML，XHTML-还是-HTML5"><a href="#选用-HTML，XHTML-还是-HTML5" class="headerlink" title="选用 HTML，XHTML 还是 HTML5"></a>选用 HTML，XHTML 还是 HTML5</h3><ul>
<li>不管选用的哪种文档类型，你使用的标记必须与你选用的 DOCTYPE 声明保持一致。</li>
<li><p>作者喜欢使用 XHTML 规则。</p>
<ul>
<li>所有标签名和属性名都必须小写字母。</li>
<li>所有标签都必须闭合。<code>&lt;br/&gt;</code></li>
</ul>
</li>
<li><p>HTML5 的文档类型声明 <code>&lt;!DOCTYPE html&gt;</code></p>
</li>
<li>XHTML5 让 Web 服务器以 application/xhtml+xml 的 MIME 类型来响应页面，但必须预先警告。</li>
</ul>
<h2 id="显示-“缩略语列表”"><a href="#显示-“缩略语列表”" class="headerlink" title="显示 “缩略语列表”"></a>显示 “缩略语列表”</h2><pre><code class="JavaScript">function displayAbbreviations()
{
    var abbreviations = document.getElementsByTagName(&quot;abbr&quot;);
    if (abbreviations.length &lt; 1) return false;
    var defs = new Array();
    for (var i = 0; i &lt; abbreviations.length; i++)
    {
        var current_abbr = abbreviations[i];
        var definition = current_abbr.getAttribute(&quot;title&quot;);
        var key = current_abbr.lastChild.nodeValue;
        defs[key] = definition;
    }
}
</code></pre>
<h3 id="创建标记"><a href="#创建标记" class="headerlink" title="创建标记"></a>创建标记</h3><ul>
<li>定义列表是表现缩略语及其解释的理想结构。定义列表（<dl>）由一系列”定义标题”（<dt>）和相应的 “定义描述” （<dd>）构成。</dd></dt></dl></li>
<li>for/in - <code>for(variable in array)</code> variable 是数组的下标。</li>
</ul>
<pre><code class="JavaScript">function displayAbbreviations()
{
    if (!document.getElementsByTagName) return false;
    if (!document.createElement) return false;
    if (!document.createTextNode) return false;

    var abbreviations = document.getElementsByTagName(&quot;abbr&quot;);
    if (abbreviations.length &lt; 1) return false;
    var defs = new Array();

    for (var i = 0; i &lt; abbreviations.length; i++)
    {
        var current_abbr = abbreviations[i];
        var definition = current_abbr.getAttribute(&quot;title&quot;);
        var key = current_abbr.lastChild.nodeValue;
        defs[key] = definition;
    }

    var dlist = document.createElement(&quot;dl&quot;);
    for (key in defs)
    {
        var definition = defs[key];
        var dtitle = document.createElement(&quot;dt&quot;);
        var dtitle_text = document.createTextNode(key);
        dtitle.appendChild(dtitle_text);
        var ddesc = document.createElement(&quot;dd&quot;);
        var ddesc_text = document.createTextNode(definition);
        ddesc.appendChild(ddesc_text);
        dlist.appendChild(dtitle);
        dlist.appendChild(ddesc);
    }

    var header = document.createElement(&quot;h2&quot;);
    var header_text = document.createTextNode(&quot;Abbreviations&quot;);
    header.appendChild(header_text);
    document.getElementsByTagName(&quot;body&quot;)[0].appendChild(header);
    document.getElementsByTagName(&quot;body&quot;)[0].appendChild(dlist);
}

addLoadEvent(displayAbbreviations);
</code></pre>
<ul>
<li>再真实项目中，通常还需要压缩脚本，并把它们合并成一个文件。</li>
</ul>
<h3 id="一个浏览器-“地雷”"><a href="#一个浏览器-“地雷”" class="headerlink" title="一个浏览器 “地雷”"></a>一个浏览器 “地雷”</h3><ul>
<li>IE 浏览器直到 IE 7 才支持 abbr 元素。</li>
<li><p>解决方案</p>
<ul>
<li>替换为 acronym 元素</li>
<li>使用 html 命名空间（<code>&lt;html:abbr&gt;</code>）</li>
<li><p>不能识别 abbr 元素的浏览器退出</p>
<pre><code class="JavaScript">  if (current_abbr.childNodes.length &lt; 1) continue;
  // 因为 IE 浏览器在统计 abbr 元素的字节点个数时总是会返回一个错误的值 - 零

  if (dlist.childNodes.length &lt; 1) return false;
</code></pre>
</li>
</ul>
</li>
</ul>
<h2 id="显示-“文献来源链接表”"><a href="#显示-“文献来源链接表”" class="headerlink" title="显示 “文献来源链接表”"></a>显示 “文献来源链接表”</h2><ul>
<li>有些浏览器会把这个换行符解释为一个文本节点。</li>
<li>在编写 DOM 脚本时，会想当然地认为某个节点肯定是一个元素节点，这是一种常见错误。没有百分之百把握，要去检查 nodeType 属性值。很多 DOM 方法只能用在元素节点上，如果用在文本节点上，就会出错。</li>
</ul>
<pre><code class="JavaScript">function displayCitations()
{
    if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
    var quotes = document.getElementsByTagName(&quot;blockquote&quot;);
    for (var i = 0; i &lt; quotes.length; i++)
    {
        if (!quotes[i].getAttribute(&quot;cite&quot;)) continue;
        var url = quotes[i].getAttribute(&quot;cite&quot;);

        var quoteChildren = quotes[i].getElementsByTagName(&quot;*&quot;);
        if (quoteChildren.length &lt; 1) continue;
        var elem = quoteChildren[quoteChildren.length - 1];

        var link = document.createElement(&quot;a&quot;);
        var link_text = document.createTextNode(&quot;source&quot;);
        link.appendChild(link_text);
        link.setAttribute(&quot;href&quot;, url);

        var superscript = document.createElement(&quot;sup&quot;);
        superscript.appendChild(link);
        elem.appendChild(superscript);
    }
}
addLoadEvent(displayCitations);
</code></pre>
<h2 id="显示-“快捷键清单”"><a href="#显示-“快捷键清单”" class="headerlink" title="显示 “快捷键清单”"></a>显示 “快捷键清单”</h2><ul>
<li>把文档里能用到的所有快捷键显示在页面里。</li>
<li>accesskey 属性可以把一个元素（如链接）与键盘上的某个特定按键关联在一起。</li>
</ul>
<h2 id="检索和添加信息"><a href="#检索和添加信息" class="headerlink" title="检索和添加信息"></a>检索和添加信息</h2><ul>
<li>用 JavaScript 函数先把文档结构里的一些现有信息提取出来，再把那些信息以一种清晰和有意义的方式重新插入到文档里去。</li>
<li><p>信息检索</p>
<ul>
<li>getElementById</li>
<li>getElementsByTagName</li>
<li>getAttribute</li>
</ul>
</li>
<li><p>添加到文档里</p>
<ul>
<li>createElement</li>
<li>createTextNode</li>
<li>appendChild</li>
<li>inertBefore</li>
<li>setAttribute</li>
</ul>
</li>
<li><p>JavaScript 脚本只应该用来充实文档的内容，要避免使用 DOM 技术来创建核心内容。</p>
</li>
</ul>
<h1 id="CSS-DOM"><a href="#CSS-DOM" class="headerlink" title="CSS-DOM"></a>CSS-DOM</h1><h2 id="三位一体的网页"><a href="#三位一体的网页" class="headerlink" title="三位一体的网页"></a>三位一体的网页</h2><ul>
<li><p>结构层</p>
<blockquote>
<p>structural layer 由 HTML 或 XHTML 之类的标记语言负责创建。</p>
</blockquote>
</li>
<li><p>表示层</p>
<blockquote>
<p>由 CSS 负责完成，CSS 描述页面内容应该如何呈现。</p>
</blockquote>
</li>
<li><p>行为层</p>
<blockquote>
<p>负责内容应该如何响应事件这一问题。这是 JavaScript 语言和 DOM 主宰的领域。</p>
</blockquote>
</li>
</ul>
<p>–</p>
<ul>
<li>网页的表示层和行为层总是存在的。Web 浏览器将应用它的默认样式和默认事件处理函数。</li>
</ul>
<h3 id="分离"><a href="#分离" class="headerlink" title="分离"></a>分离</h3><ul>
<li>三种技术之间存在着一些潜在的重叠区域。</li>
</ul>
<h2 id="style-属性"><a href="#style-属性" class="headerlink" title="style 属性"></a>style 属性</h2><ul>
<li><p>文档里的每个元素都是一个对象，每个元素都有一个 style 属性，它们也是一个对象。</p>
</li>
<li><p>查询这个属性将返回一个对象而不是一个简单的字符串。样式都存放在这个 style 对象的属性里： <code>element.style.property</code></p>
</li>
</ul>
<h3 id="获取样式"><a href="#获取样式" class="headerlink" title="获取样式"></a>获取样式</h3><ul>
<li><p>当需要引用一个中间带减号的 CSS 属性时，DOM 要求你用驼峰命名法。</p>
</li>
<li><p>DOM 在表示样式属性时采用的单位并不总是与它们在 CSS 样式表里的设置相同。</p>
</li>
</ul>
<pre><code class="CSS">&lt;p id=&quot;example&quot; style=&quot;color: #999999; font-family: &#39;Arial&#39;,sans-serif&quot;&gt;
// 在某些浏览器中 color 属性以 RGN（红，绿，蓝）格式的颜色值（153，153，153）返回。
</code></pre>
<ul>
<li><p>通过 style 属性只能返回内嵌样式。只有把 CSS style 属性插入到标记里，才可以用 DOM style 属性去查询那些信息。</p>
</li>
<li><p>在外部样式表里声明的样式不会进入 style 对象，在文档的 <code>&lt;head&gt;</code> 部分里声明的样式也是如此。</p>
</li>
<li><p>另一种情况可以让 DOM style 对象能够正确地反射出我们设置的样式。用 DOM 设置的样式，可以用 DOM 再把它们检索出来。</p>
</li>
</ul>
<h3 id="设置样式"><a href="#设置样式" class="headerlink" title="设置样式"></a>设置样式</h3><ul>
<li>许多 DOM 属性是只读的，我们只能用它们来获取信息，但不能用它们来设置或更新信息。如 previousSibling, nextSibling, parentNode, firstChild, lastChild</li>
<li>style 对象的各个属性都是可读写的。<code>element.style.property = value</code></li>
<li>style 对象的属性值永远是一个字符串。JavaScript 代码覆盖那些内嵌在标记里的 CSS 代码。</li>
</ul>
<h2 id="何时该用-DOM-脚本设置样式"><a href="#何时该用-DOM-脚本设置样式" class="headerlink" title="何时该用 DOM 脚本设置样式"></a>何时该用 DOM 脚本设置样式</h2><ul>
<li>不应该利用 DOM 为文档设置重要的样式。</li>
</ul>
<h3 id="根据元素在节点树里的位置来设置样式"><a href="#根据元素在节点树里的位置来设置样式" class="headerlink" title="根据元素在节点树里的位置来设置样式"></a>根据元素在节点树里的位置来设置样式</h3><pre><code class="CSS">input[type*=&quot;text&quot;]
{
    font-size: 1.2em;
}
p: first-of-type
{
    font-size: 2em;
    font-weight: bold;
}
</code></pre>
<ul>
<li>找出跟在每个 h1 元素后面的那个元素。</li>
</ul>
<pre><code class="JavaScript">function styleHeaderSiblings()
{
    if (!document.getElementsByTagName) return false;
    var headers = document.getElementsByTagName(&quot;h1&quot;);
    for (var i = 0; i &lt; headers.length; i++)
    {
        var elem = getNextElement(headers[i].nextSibling);
        elem.style.fontWeight = &quot;bold&quot;;
        elem.style.fontSize = &quot;1.2em&quot;;
    }
}

function getNextElement(node)
{
    if (node.nodeType == 1)
    {
        return node;
    }
    if (node.nextSibling)
    {
        return getNextElement(node.nextSibling);
    }
    return null;
}

addLoadEvent(styleHeaderSiblings);
</code></pre>
<h3 id="根据某种条件反复设置某种样式"><a href="#根据某种条件反复设置某种样式" class="headerlink" title="根据某种条件反复设置某种样式"></a>根据某种条件反复设置某种样式</h3><ul>
<li>表格用来做页面布局不是好主意，但是用来显示表格数据却是理所应当的。</li>
<li>让表格里的行更可读的常用技巧是交替改变它们的背景色，从而形成斑马线效果。</li>
</ul>
<pre><code class="CSS">// 如果支持 CSS 3
tr:nth-child(odd)
{
    background-color: #ffc;
}

tr:nth-child(even)
{
    background-color: #fff;
}
</code></pre>
<ul>
<li>不支持 <code>:nth-child()</code></li>
</ul>
<pre><code class="JavaScript">function stripeTables()
{
    if (!document.getElementsByTagName) return false;
    var tables = document.getElementsByTagName(&quot;table&quot;);
    var odd, rows;
    for (var i = 0; i &lt; tables.length; i++)
    {
        odd = false;
        rows = tables[i].getElementsByTagName(&quot;tr&quot;);
        for (var j = 0; j &lt; rows.length; j++)
        {
            if (odd === true)
            {
                rows[j].style.backgroundColor = &quot;#ffc&quot;;
                odd = false;
            } else
            {
                odd = true;
            }
        }
    }
}
addLoadEvent(stripeTables);
</code></pre>
<h3 id="响应事件"><a href="#响应事件" class="headerlink" title="响应事件"></a>响应事件</h3><ul>
<li>CSS 提供的 <code>:hover</code> 等伪 class 属性允许我们根据 HTML 元素的状态改变样式。DOM 也可以通过 <code>onmouseover</code> 等事件对 HTML 元素的状态变化做出响应。</li>
<li><p>很难判断何时用 <code>:hover</code> 何时用 <code>onmouseover</code>。最简单的答案是选择最容易实现的办法。</p>
</li>
<li><p>伪类 <code>:hover</code> 在用来改变链接的样式时（大多数浏览器支持），但在鼠标悬停在其他元素上时改变样式，支持的浏览器就不多了。</p>
</li>
</ul>
<pre><code>tr:hover
{
    font-weight: bold;
}

function highlightRows()
{
    if (!document.getElementsByTagName) return false;
    var rows = document.getElementsByTagName(&quot;tr&quot;);
    for (var i = 0; i &lt; rows.length; i++)
    {
        rows[i].onmouseover = function()
        {
            this.style.fontWeight = &quot;bold&quot;;
        };
        rows[i].onmouseout = function()
        {
            this.style.fontWeight = &quot;normal&quot;;
        };
    }
}

addLoadEvent(highlightRows);
</code></pre><ul>
<li><p>决定是采用纯粹的 CSS 来解决</p>
<ul>
<li>这个问题最简单的解决方案是什么</li>
<li>哪种解决方案会得到更多浏览器的支持</li>
</ul>
</li>
</ul>
<h2 id="className-属性"><a href="#className-属性" class="headerlink" title="className 属性"></a>className 属性</h2><ul>
<li><p>与其使用 DOM 直接改变某个元素的样式，不如通过 JavaScript 代码去更新这个元素的 class 属性。<code>element.className = value</code></p>
</li>
<li><p>通过 className 属性设置某个元素的 class 属性时将替换该元素原有的 class 设置。</p>
</li>
</ul>
<pre><code class="JS">elem.className += &quot; intro&quot;;// 注意 intro 的一个字符时空格

function addClass(element, value)
{
    if (!element.className)
    {
        element.className = value;
    } else
    {
        newClassName = element.className;
        newClassName += &quot; &quot;;
        newClassName += value;
        element.className = newClassName;
    }
}
</code></pre>
<h3 id="对函数进行抽象"><a href="#对函数进行抽象" class="headerlink" title="对函数进行抽象"></a>对函数进行抽象</h3><pre><code class="JS">function styleElementSiblings(tag, theclass)
{
    if (!document.getElementsByTagName) return false;
    var elems = document.getElementsByTagName(tag);
    var elem;
    for (var i = 0; i &lt; elems.length; i++)
    {
        elem = getNextElement(elems[i].nextSibling);
        addClass(elem, theclass)
    }
}
</code></pre>
<h1 id="用-JavaScript-实现动画效果"><a href="#用-JavaScript-实现动画效果" class="headerlink" title="用 JavaScript 实现动画效果"></a>用 JavaScript 实现动画效果</h1><ul>
<li>CSS-DOM 让网页上的元素动起来</li>
</ul>
<h2 id="动画基础知识"><a href="#动画基础知识" class="headerlink" title="动画基础知识"></a>动画基础知识</h2><ul>
<li>动画是样式随时间变化的完美例子之一。</li>
</ul>
<h3 id="位置"><a href="#位置" class="headerlink" title="位置"></a>位置</h3><ul>
<li><p>position 属性</p>
<ul>
<li>static 默认值，有关元素将按照它们在标记里出现的先后顺序出现在浏览器窗口里。</li>
<li>relative 与 static 相似，区别是 position 属性等于 relative 的元素还可以（通过应用 float 属性）从文档的正常顺序里脱离出来。</li>
<li><p>absolute 我们可以把它摆放到容纳它的 “容器” 的任何位置。这个容器要么是文档本身，要么是有着 fixed 或 absolute 属性的父元素。这个元素在原始标记里出现的位置与它的显示位置无关，它的显示位置由 top,left,right,bottom 等属性决定。</p>
<blockquote>
<p>防止冲突，最好只使用 top 或只使用 bottom 属性，left 或 right 属性也是如此。</p>
</blockquote>
</li>
<li><p>fixed</p>
</li>
</ul>
</li>
<li><p>函数一个接一个地执行，其间根本没有我们所能察觉的间隔。为了实现动画效果，我们必须 “创造” 出时间间隔来，而这正是我们将要探讨的问题。</p>
</li>
</ul>
<h3 id="时间"><a href="#时间" class="headerlink" title="时间"></a>时间</h3><pre><code class="JS">variable = setTimeout(&quot;function&quot;, interval);
// 第一个参数是将要执行的函数名
// 第二个参数，以毫秒为单位设定里需要经过多长时间后才开始执行第一个参数所给出的函数。

clearTimeout(variable) // 取消某个正在排队等待执行的函数

movement = setTimeout(&quot;moveMessage()&quot;, 5000);
</code></pre>
<h3 id="时间递增量"><a href="#时间递增量" class="headerlink" title="时间递增量"></a>时间递增量</h3><ul>
<li>真正的动画效果是一个渐变的过程，元素应该从出发点逐步地移动到目的地，而不是从出发点一下子跳跃到目的地。</li>
</ul>
<pre><code class="JS">parseInt(string) // 把字符串里的数值信息提取出来。
parseInt(&quot;39 steps&quot;) // 39

parseFloat(string) // 返回浮点数
</code></pre>
<h3 id="抽象"><a href="#抽象" class="headerlink" title="抽象"></a>抽象</h3><pre><code class="JS">function moveElement(elementID, final_x, final_y, interval)
{
    if (!document.getElementById) return false;
    if (!document.getElementById(elementID)) return false;
    var elem = document.getElementById(elementID);
    var xpos = parseInt(elem.style.left);
    var ypos = parseInt(elem.style.top);

    if (xpos === final_x &amp;&amp; ypos === final_y) return true;
    if (xpos &lt; final_x) xpos++;
    if (xpos &gt; final_x) xpos--;
    if (ypos &lt; final_y) ypos++;
    if (ypos &gt; final_y) ypos--;
    elem.style.left = xpos + &quot;px&quot;;
    elem.style.top = ypos + &quot;px&quot;;

    var repeat =&quot;moveElement(&#39;&quot; + elementID + &quot;&#39;,&quot; + final_x + &quot;,&quot; + final_y +&quot;,&quot; + interval + &quot;)&quot;;
    setTimeout(repeat, 10);
}

addLoadEvent(moveElement);
</code></pre>
<h2 id="实用的动画"><a href="#实用的动画" class="headerlink" title="实用的动画"></a>实用的动画</h2><ul>
<li><p>Web 内容可访问性指南 7.2 节</p>
<blockquote>
<p>除非浏览器允许用户 “冻结” 移动着的内容，否则就应该避免让内容在页面中移动。（优先级 2 ）<br>如果页面上有移动着的内容，就应该用脚本或插件的机制允许用户冻结这种移动或动态更新行为。</p>
</blockquote>
</li>
</ul>
<h3 id="提出问题"><a href="#提出问题" class="headerlink" title="提出问题"></a>提出问题</h3><ul>
<li><code>onmouseover</code> 当用户第一次把鼠标指针悬停在某个链接上时，新图片将被加载过去。即使是在一个高速的网络连接上，这多少也需要花费点儿时间，而我们希望能够立刻响应。</li>
</ul>
<h3 id="解决问题"><a href="#解决问题" class="headerlink" title="解决问题"></a>解决问题</h3><ul>
<li>“集体照”</li>
</ul>
<h3 id="CSS-1"><a href="#CSS-1" class="headerlink" title="CSS"></a>CSS</h3><ul>
<li><p>overflow 属性用来处理一个元素的尺寸超出其容器尺寸的情况。</p>
<ul>
<li>visible 不裁剪溢出的内容。浏览器把溢出的内容呈现在其容器元素的显示区域以外。</li>
<li>hidden 隐藏溢出的内容。</li>
<li>scroll 类似于 hidden 浏览器对溢出的内容进行隐藏，但显示一个滚动条以便让用户能够看到内容的其他部分。</li>
<li>auto 类似于 scroll ，但浏览器只在确实发生溢出时才显示滚动条。</li>
</ul>
</li>
</ul>
<h3 id="变量作用域问题"><a href="#变量作用域问题" class="headerlink" title="变量作用域问题"></a>变量作用域问题</h3><ul>
<li><code>moveElement()</code> 每次用户把鼠标指针悬停在某个链接上，不管上一次调用是否已经把图片移动到位，moveElement 函数都会再次调用并视图把这个图片移动到另一个地方去。</li>
<li>如果用户移动鼠标的速度够快，积累在 setTimeout 队列里的事件就会导致动画效果产生滞后。</li>
<li><p>为了消除滞后效果，可以用 <code>clearTimeout(movement)</code> 函数清除积累在 setTimeout 队列里的事件。</p>
</li>
<li><p>movement 既不能使用全局变量，也不能使用局部变量。需要一种介乎它们两者之间的东西，一个只与正在被移动的那个元素有关的变量 - 属性。</p>
</li>
</ul>
<pre><code class="JS">function moveElement(elementID, final_x, final_y, interval)
{
    if (!document.getElementById) return false;
    if (!document.getElementById(elementID)) return false;
    var elem = document.getElementById(elementID);
    if (elem.movement)
    {
        clearTimeout(elem.movement);
    }

    var xpos = parseInt(elem.style.left);
    var ypos = parseInt(elem.style.top);

    if (xpos === final_x &amp;&amp; ypos === final_y) return true;
    if (xpos &lt; final_x) xpos++;
    if (xpos &gt; final_x) xpos--;
    if (ypos &lt; final_y) ypos++;
    if (ypos &gt; final_y) ypos--;
    elem.style.left = xpos + &quot;px&quot;;
    elem.style.top = ypos + &quot;px&quot;;

    var repeat =&quot;moveElement(&#39;&quot; + elementID + &quot;&#39;,&quot; + final_x + &quot;,&quot; + final_y +&quot;,&quot; + interval + &quot;)&quot;;
    elem.movement = setTimeout(repeat, 10);
}

addLoadEvent(moveElement);
</code></pre>
<h3 id="改进动画效果"><a href="#改进动画效果" class="headerlink" title="改进动画效果"></a>改进动画效果</h3><pre><code class="JS">Math.ceil(number); // 这将把浮点数向 &quot;大于&quot; 方向舍入为与之最接近的整数。
Math.floor(number); // 向 &quot;小于&quot; 方向舍入为与之最接近的整数。
Math.round(number); // 舍入与之最接近的整数。

function moveElement(elementID, final_x, final_y, interval)
{
    if (!document.getElementById) return false;
    if (!document.getElementById(elementID)) return false;
    var elem = document.getElementById(elementID);
    if (elem.movement)
    {
        clearTimeout(elem.movement);
    }

    var xpos = parseInt(elem.style.left);
    var ypos = parseInt(elem.style.top);
    var dist = 0;

    if (xpos === final_x &amp;&amp; ypos === final_y) return true;
    if (xpos &lt; final_x)
    {
        dist = Math.ceil((final_x - xpos) / 10);
        xpos = xpos + dist;
    }
    if (xpos &gt; final_x)
    {
        dist = Math.ceil((xpos - final_x) / 10);
        xpos = xpos - dist;
    }
    if (ypos &lt; final_y)
    {
        dist = Math.ceil((final_y - ypos));
        ypos = ypos + dist;
    }
    if (ypos &gt; final_y)
    {
        dist = Math.ceil((ypos - final_y));
        ypos = ypos - dist;
    }
    elem.style.left = xpos + &quot;px&quot;;
    elem.style.top = ypos + &quot;px&quot;;

    var repeat =&quot;moveElement(&#39;&quot; + elementID + &quot;&#39;,&quot; + final_x + &quot;,&quot; + final_y +&quot;,&quot; + interval + &quot;)&quot;;
    elem.movement = setTimeout(repeat, 10);
}

addLoadEvent(moveElement);
</code></pre>
<ul>
<li>动画效果更加平滑和迅速。</li>
</ul>
<h3 id="添加安全检查"><a href="#添加安全检查" class="headerlink" title="添加安全检查"></a>添加安全检查</h3><pre><code class="JS">if (!elem.style.left) elem.style.left = &quot;0px&quot;;
if (!elem.style.top) elem.style.top = &quot;0px&quot;;
</code></pre>
<h3 id="生成-HTML-标记"><a href="#生成-HTML-标记" class="headerlink" title="生成 HTML 标记"></a>生成 HTML 标记</h3><ul>
<li>如果用户没有启用 JavaScript 支持，div 和 img 是多余的。</li>
<li>这里的 div 和 img 元素纯粹是为了动画效果才硬编码进来的。不如用 JavaScript 代码生成它们。</li>
</ul>
<h1 id="HTML5"><a href="#HTML5" class="headerlink" title="HTML5"></a>HTML5</h1><ul>
<li>HTML 规范从 HTML4 到 XHTML ，再到 Web Apps 1.0 最后又回到 HTML5 。</li>
<li><p>三层</p>
<ul>
<li>结构层 超文本标记语言（HTML）</li>
<li>样式层 层叠样式表（CSS）</li>
<li>行为层 JavaScript 和文档对象模型（DOM）</li>
</ul>
</li>
<li><p>还可以再加一层，也就是浏览器的 JavaScript API， 包括 cookie 和 window （浏览器对象模型（BOM Browser Object Model））等</p>
</li>
<li>HTML5 是一个集合。特性检测。</li>
</ul>
<h2 id="忠告"><a href="#忠告" class="headerlink" title="忠告"></a>忠告</h2><ul>
<li>工具 <code>Modernizr</code> 富特性检测功能，可以对 HTML5 文档进行更好的控制。</li>
</ul>
<pre><code class="HTML">// Modernizer 修改 &lt;html&gt; class 属性，就与可用的 HTML5 特性添加额外的类名。
&lt;html class=&quot;no-js&quot;&gt;

// 类名中就会间或出现 feature 和 no-feature
// 根据这些类名，可以在 CSS 中定义响应的增强和退化版本，改善用户体验
.multiplebgs article p
{
    // 为支持多背景浏览器编写的样式
}
.no-multiplebgs article p
{
    // 为不支持多背景浏览器编写的后备样式
}

&lt;script src=&quot;modernizr-1.5.min.js&quot;&gt;&lt;/script&gt;
// 一定要放在 `&lt;head&gt;` 元素中。以便它在文档呈现之前能够创建好新的 HTML5 元素。
</code></pre>
<ul>
<li><p>Modernizer 也提供了 JavaScript 特性检测对象</p>
</li>
<li><p>Modernizer 还可以帮一些老旧的浏览器处理 <code>&lt;section&gt;</code> <code>article</code> 这样的新元素。</p>
</li>
</ul>
<h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h2><h3 id="Canvas"><a href="#Canvas" class="headerlink" title="Canvas"></a>Canvas</h3><ul>
<li>动态创建和操作图形图像。</li>
</ul>
<h3 id="音频和视频"><a href="#音频和视频" class="headerlink" title="音频和视频"></a>音频和视频</h3><pre><code class="HTML">&lt;video src=&quot;movie.mp4&quot;&gt;
    // 不支持原声视频的替代内容
    &lt;a href=&quot;movie.mp4&quot;&gt;Download movie.mp4&lt;/a&gt;
&lt;/video&gt;

&lt;audio src=&quot;sound.ogg&quot;&gt;
    &lt;a href=&quot;sound.ogg&quot;&gt;Download sound.ogg&lt;/a&gt;
&lt;/audio&gt;
</code></pre>
<h4 id="混乱的时候"><a href="#混乱的时候" class="headerlink" title="混乱的时候"></a>混乱的时候</h4><ul>
<li>并未说明支持哪些视频格式</li>
<li>扩展名 mp4 表示视频是使用基于苹果 QuickTime 技术的 MPEG4 打包而成的。这个容器规定了不同的音频轨道在文件中的位置，以及其他与回放相关的特性。</li>
<li>每个影片容器中，音频和视频轨道都使用不同的编解码器来编码。</li>
<li><p>视频编解码器</p>
<ul>
<li>H.264</li>
<li>Theora</li>
<li>VP8</li>
</ul>
</li>
<li><p>音频文件编解码器</p>
<ul>
<li>mp3（MPEG-1 Audio Layer 3）</li>
<li>aac（Advanced Audio Coding）</li>
<li>ogg（Ogg Vorbis）</li>
</ul>
</li>
<li><p>没有一款浏览器支持所有的容器和编解码器，因此我们必须提供多种后备格式。</p>
</li>
</ul>
<pre><code class="HTML">&lt;video id=&quot;movie&quot; preload controls&gt;
    &lt;source src=&quot;movie.mp4&quot;/&gt;
    &lt;source src=&quot;movie.webm&quot; type=&quot;video/webm; codecs=&#39;vp8&#39;, vorbis&quot;/&gt;
    &lt;source src=&quot;movie.ogv&quot; type=&quot;video/ogg; codecs=&#39;theora, vorbis&#39;&quot;/&gt;
    &lt;p&gt;Download movie as
        &lt;a href=&quot;movie.mp4&quot;&gt;MP4&lt;/a&gt;
        &lt;a href=&quot;movie.webm&quot;&gt;WebM&lt;/a&gt;
        or &lt;a href=&quot;movie.ogv&quot;&gt;Ogg&lt;/a&gt;.
    &lt;/p&gt;
&lt;/video&gt;
</code></pre>
<ul>
<li><p>为了确保 HTML5 最大的兼容性，至少包含三个版本。</p>
<ul>
<li>基于 H.264 和 AAC 的 MP4</li>
<li>WebM（VP8 + Vorbis）</li>
<li>基于 Theora 视频和 Vorbis 音频的 Ogg 文件</li>
</ul>
</li>
<li><p>不同的视频格式的排列次序也是一个问题。</p>
</li>
</ul>
<h4 id="自定义控件"><a href="#自定义控件" class="headerlink" title="自定义控件"></a>自定义控件</h4><ul>
<li><p>DOM 属性</p>
<ul>
<li>currentTime 返回当前播放的位置，秒表示</li>
<li>duration 返回媒体的总时长，以秒表示，对于流媒体返回无穷大</li>
<li>paused 表示媒体是否处于暂停状态 </li>
<li>play 在媒体播放开始时发生 </li>
<li>pause 在媒体暂停时发生</li>
<li>loadeddata 在媒体可以从当前播放位置开始播放时发生</li>
<li>ended 在媒体已播放完成而停止时发生</li>
</ul>
</li>
<li><p>不管创建什么控件，都要添加 control 属性 <code>&lt;video src=&quot;movie.ogv&quot; control&gt;</code></p>
</li>
<li><p>addEventListener 为对象添加事件处理函数的规范方法。</p>
</li>
</ul>
<h3 id="表单"><a href="#表单" class="headerlink" title="表单"></a>表单</h3><ul>
<li><p>新的输入控件</p>
<ul>
<li>email</li>
<li>url</li>
<li>date</li>
<li>number</li>
<li>range 滚动条</li>
<li>search 搜索框</li>
<li>tel 电话号码</li>
<li>color 选择颜色</li>
</ul>
</li>
<li><p>浏览器知道这些控件都接收什么类型的输入，因此可以为他们配备不同的输入控件。</p>
</li>
<li><p>新的属性</p>
<ul>
<li>autocomplete 用于文本输入框添加一组建议的输入项</li>
<li>autofocus 用于让表达元素自动获得焦点</li>
<li>form 用于对 <code>&lt;form&gt;</code> 标签外部的表单元素分组</li>
<li>min, max 和 step 用在范围(range) 和 数值(number)输入框中</li>
<li>pattern 用于定义一个正则表达式，以便验证输入的值</li>
<li>placeholder 用于在文本输入框中显示临时性的提示信息</li>
<li>required 必填</li>
</ul>
</li>
<li><p>为了应对不兼容的浏览器，必须使用特性检测。</p>
</li>
</ul>
<pre><code class="JS">// 检查某个输入类型的控件 inputtypes.type
if (!Modernizr.inputtypes.date)
{
    // 生成日期选择器的脚本
}

// 检查某个属性 input.attribute
if (!Modernizr.input.placeholder)

&lt;input type=&quot;text&quot; id=&quot;first-name&quot; placeholder=&quot;Your First Nmae&quot;&gt;

if (!Modernizr.input.placeholder)
{
    var input = document.getElementById(&quot;first-name&quot;);
    input.onfocus = function()
    {
        var text = this.placeholder || this.getAttribute(&quot;placeholder&quot;);
        if (this.text == text)
        {
            this.value = &quot;&quot;;
        }
    }
    input.onblur = function()
    {
        if (this.value == &quot;&quot;)
        {
            this.value = this.placeholder || this.getAttrubute(&quot;placeholder&quot;);
        }
    }
    // 在 onblur 处理函数运行时中添加占位符文本
    input.onblue();
}
</code></pre>
<h1 id="综合示例"><a href="#综合示例" class="headerlink" title="综合示例"></a>综合示例</h1><ul>
<li><p>站点目录结构</p>
<ul>
<li>/images</li>
<li><p>/styles</p>
<ul>
<li>color.css 颜色</li>
<li>layout.css 布局</li>
<li>typography.css 版式</li>
<li>basic.css</li>
</ul>
</li>
<li>/scripts</li>
</ul>
</li>
<li><p>创建页面</p>
<ul>
<li>Home index.html</li>
<li>About about.html</li>
<li>Photos photos.html</li>
<li>Live live.html</li>
<li>Contact contact.html</li>
</ul>
</li>
<li><p>不管为哪个元素应用什么颜色，都要同时给它一个背景色。否则，就有可能导致意外，看不到某些文本。</p>
</li>
<li><p>导航链接，常见做法是通过服务器端包含技术，把包含导航标记的片段插入到每个页面中。优点是重用标记块集中保存。但是不能自定义这块。</p>
</li>
<li><p>常见问题页面，每个问题都可以作为内部链接处理，点击一个问题，就会显示出与该问题对应的答案，其他答案不显示。</p>
</li>
</ul>
<h2 id="增强表单"><a href="#增强表单" class="headerlink" title="增强表单"></a>增强表单</h2><ul>
<li>作为增进可访问性的元素，label 非常有用。它通过 for 属性把一小段关联到表单的一个字段。</li>
<li><p>form 对象</p>
<ul>
<li>form.elements.length 只关注属于表单元素的元素。</li>
<li>form.elements</li>
<li>element.value</li>
</ul>
</li>
<li><p>onfocus 事件会在用户通过按 Tab 键或单机表单字段时被触发，而 onblur  事件会在用户把焦点移出表单字段时触发。</p>
</li>
<li><p>JavaScript 编写验证表单的脚本时</p>
<ul>
<li>验证脚本写得不好，反而不如没有验证</li>
<li>千万不要完全依赖 JavaScript。客户端验证并不能取代服务端的验证。即使有了 JavaScript 验证，服务器照样还应该对接收到的数据再次验证。</li>
<li>客户端验证的目的在于帮助保护用户的填好表单，避免他们提交未完成的表单，从而节省他们的时间。服务器验证的目的在于抱回数据库和后台系统的安全。</li>
</ul>
</li>
<li><p>一定尽量保持验证过程尽可能简单。</p>
</li>
<li>无论什么时候提交表单，都会触发 submit 事件，而事件会被 onsubmit 事件处理函数拦截。</li>
</ul>
<pre><code class="JavaScript">request.setRequestHeader(&quot;Content-type&quot;, &quot;application/x-www-form-urlencoded&quot;);
// 这个头部信息对于 POST 请求是必需的，它表示请求中包含 URL 编码的表单。


var matches = request.responseText.match(/&lt;article&gt;([\s\S]+)&lt;\/article&gt;/);
// 数组 matches 的第一个元素（索引为 0）是 responseText 中与整个模式匹配的部分，即包括 `&lt;article&gt;` `&lt;/article&gt;`  的部分。
// 因为模式中包含一个捕获组（一对圆括号），因此 matches 的第二个元素（索引为 1）是 responseText 中与捕获组中的模式匹配部分。
</code></pre>
<h3 id="压缩代码"><a href="#压缩代码" class="headerlink" title="压缩代码"></a>压缩代码</h3><ul>
<li>谷歌 Closure Compiler</li>
</ul>

 
                <!-- Meta -->
                <div class="post-meta">
                    <hr>
                    <br>
                    <div class="post-tags">
                        
                            

<a href="/tags/JavaScript/">#JavaScript</a>


                        
                    </div>
                    <div class="post-date">
                        2017 年 06 月 06 日
                    </div>
                </div>
            </div>

            <!-- Comments -->
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <!-- Disqus Comments -->


            </div>
        </div>
    </div>
</article>
</section>

    <!-- Scripts -->
    <!-- jQuery -->
<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script type="text/javascript">
	hljs.initHighlightingOnLoad();
	console.log('Hexo-theme-hollow designed by zchen9 http://www.chen9.info © 2015-' + (new Date()).getFullYear());
</script>

    <!-- Google Analytics -->
    

</body>

</html>